jquery dialog not load iframe - javascript

I have this code:
<div id="dialog">
<iframe id="myIframe" src=""></iframe>
</div>
<style>
#myIframe{
width: 100%;
height: 100%;
}
</style>
function showModalSettings(id){
alert(id);
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function (ev, ui) {
$('#myIframe').src = 'https://www.onet.pl';
},
height: '600',
width: '800',
resizable: true,
title: 'Settings'
});
$('#dialog').dialog('open');
}
showModalSettings(12);
I need to open in the jquery dialogbox https://www.onet.pl (in iframe).
The current code shows me the dialogbox correctly - but without the onet.pl website. Iframe is empty
how to fix it?

With jQuery we use the attr() method to modify the attributes of an HTML element.
Your code after the fix will looks like this:
function showModalSettings(id){
alert(id);
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function (ev, ui) {
//$("#myIframe").src = "https://www.onet.pl";
$("#myIframe").attr("src", "https://www.onet.pl");
},
height: '600',
width: '800',
resizable: true,
title: 'Settings'
});
$('#dialog').dialog('open');
}
showModalSettings(12);
#myIframe{
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello, world!</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="dialog">
<iframe id="myIframe"></iframe>
</div>
</body>
</html>
Read more about the attr() from the following link: https://api.jquery.com/attr/
Side Note: next time please reveal the libraries or frameworks you're using (e.g. jQuery UI in this question) , this help whoever want to answer your question.

Related

Dim background screen when modal popup opens

I have a modal popup that opens on a button click. I am trying to dim the background when the popup open but I can't get it to work.
This is what I have:
JavaScript:
function popup(centername, centertype, area, address, province, itprovider, software, addon,
principalname, principleemmail, itname, itemail, itno, academicname, academicno, academicemail,
invigilatorname, invigilatorno, invigilatoremail, centeridep, provinceidep, centernameep, centertypeidep, id) {
var $dropdown = $("#ddlCenterType");
$("#txtCenterName").val(centername);
$("#txtArea").val(area);
$("#txtAddress").val(address);
$("#ddlProvince").val(province);
$("#ddlProvider").val(itprovider);
$("#ddlSoftware").val(software);
$("#ddlAddOn").val(addon);
$("#txtPrincipalName").val(principalname);
$("#txtPrincipalEmail").val(principleemmail);
$("#txtITName").val(itname);
$("#txtITemail").val(itemail);
$("#txtITNumber").val(itno);
$("#txtAcadName").val(academicname);
$("#txtAcadNumber").val(academicno);
$("#txtAcadEmail").val(academicemail);
$("#txtInvName").val(invigilatorname);
$("#txtInvNumber").val(invigilatorno);
$("#txtInvEmail").val(invigilatoremail);
$("#txtCenterId").val(centeridep);
$("#txtProvinceID").val(provinceidep);
$("#txtCtrName").val(centernameep);
$("#txtTypeID").val(centertypeidep);
$("#txtID").val(id);
$dropdown.val(centertype);
$("#popupdiv").dialog({
width: 1250,
height: 1290,
autoOpen: true,
modal: true,
open: function (event, ui) {
$(".ui-widget-overlay").css({
background: "rgb(0, 0, 0)",
opacity: ".50 !important",
filter: "Alpha(Opacity=50)",
});
},
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
}
I also added this in the CSS but still doesn't work:
.ui-widget-overlay {
opacity: .50 !important;
filter: Alpha(Opacity=50) !important;
background-color: rgb(50, 50, 50) !important;
}
I know this question has been asked a couple of times but I still can't get it to work. Please assist. Thanks!
Just remove the important from opacity and it will work. Though I would recommend to use CSS for this. You can add and remove a class when modal opened and closed, and use it in combination with ui-widget-overlay to override background and opacity.
Here is a working example of how would that work
$( function() {
$("#dialog").dialog({
width: 360,
height: 290,
autoOpen: true,
modal: true,
open: function (event, ui) {
$(".ui-widget-overlay").addClass('modal-opened');
},
close: function(event, ui){
$(".ui-widget-overlay").removeClass('modal-opened');
}
});
} );
.ui-widget-overlay.modal-opened{
background: rgb(0, 0, 0);
opacity: 0.5;
filter: Alpha(Opacity=50);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is a plnkr of the above example https://plnkr.co/edit/GUW4NFEO9omn898n8aGm?p=preview

Dialog box not displaying upon clicking button

I have a site which has the button 'Currency Converter'. When clicked on it, it should open the dialog box and conversion should happen. Following is the code:
currency_converter.php
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
<script>
$(document).ready(function() {
$('#openwindow').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#wrapper').dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function() {
var page = "https://www.google.com/finance/converter";
var $dialog = $('<div></div>')
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: 250,
width: 350,
title: "Currency Converter"
});
$dialog.dialog('open');
return false;
});
});
</script>
</head>
<body>
<button id="opener">Currency Converter</button>
<div id="wrapper">
</div>
</body>
</html>
The problem is: dialog box is not getting opened in my browser.
Can anyone please help. Thanks in advance
Chnage your jquery and css url with these
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css
You have listen for document ready twice, other then that it should work just fine.
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
<script>
$(document).ready(function() {
$('#openwindow').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
$('#wrapper').dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function() {
var page = "https://www.google.com/finance/converter";
var $dialog = $('<div></div>')
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: 250,
width: 350,
title: "Currency Converter"
});
$dialog.dialog('open');
return false;
});
});
</script>
</head>
<body>
<button id="opener">Currency Converter</button>
<div id="wrapper">
</div>
</body>
</html>

Adding animation to slides built with slick.js

I am attempting to add animation to the text on my slides built with slick.js. I attempted to use some code form this post(Slick Carousel target active slide to add and remove animation classes) but it is not adding any classes.
I feel like there is something wrong with my callback functions since I do not see these classes being added. Anyone have an idea?
<script>
$(document).ready(function(){
$('.featured-wrap').slick({
infinite: true,
speed: 400,
autoplaySpeed: 6000,
autoplay: true,
fade: true,
slide: 'div',
cssEase: 'linear',
dots: true,
arrows: true,
pauseOnHover: false,
adaptiveHeight: true
});
});
</script>
<script>
$(document).ready(function(){
$('.featured-wrap').on('afterChange', function(event, slick, currentSlide){
$('.slick-active .display').removeClass('hidden');
$('.slick-active .display').addClass('animated fadeInDown');
});
$('.featured-wrap').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$('.slick-active .display').removeClass('animated fadeInDown');
$('.slick-active .display').addClass('hidden');
});
});
</script>
html code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script src="app2.js"></script>
<style>
body {
background-color: lightblue;
}
#slickslide {
height: 200px;
background: lightgray;
}
#content {
margin: auto;
padding: 20px;
width: 80%;
}
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<div id="demo"></div>
<div id=content>
<div id="slickslide" slick="">
<div><h1>1</h1></div>
<div><h1>2</h1></div>
<div><h1>3</h1></div>
<div><h1>4</h1></div>
<div><h1>5</h1></div>
</div>
</div>
</body>
</html>
JavaScript code
function myFunction() {
$(document).ready(function(){
$('#slickslide').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1
});
});
}

How to create jquery modal popup?

What am I doing wrong that this popup isn't working?
$(document).ready(function () {
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="dialog">testing popup</div>
click me
You have to include jquery-ui also read the doc:
html
<a href="#" id="dialog_link">click me
<div id="dialog">testing popup</div>
</a>
jquery
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "show",
duration: 1000
},
hide: {
effect: "fadeOut",
duration: 1000
}
});
$("#dialog_link").click(function () {
$("#dialog").dialog("open");
});
css
#dialog_link {
display: block;
}
fiddle
Those are the links from google host libraries:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

Why does this JQuery Dialog Box appears again and again?

I am using Blogspot and My code is as follows:
//JQuery Code above <head> tag:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#dialog").dialog({ autoOpen: false });
$("#dialog").dialog({ modal: true });
$("#dialog").dialog({ position: 'center' });
$("#dialog").dialog({ resizable: false });
$("#dialog").dialog({ draggable: false });
$("#dialog").dialog({ width: 280 });
//$("#dialog").dialog({ height: 530 });
//$("#dialog").dialog({ closeText: 'hide' });
//$("#dialog").dialog({ closeOnEscape: true });
//$("#dialog").dialog({ hide: 'slide' });
//$("#dialog").dialog({ show: 'slide' });
$("#dialog").dialog({ title: 'Help!' });
/*$("#dialog").dialog({ buttons: [{
text: "Close",
click: function() { $(this).dialog("close"); }
}] });*/
$("#dialog").dialog();
setTimeout(function(){
$("#dialog").dialog("open");
}, 30000);
});
</script>
//html code above </body>
<div id="dialog" title="Dialog Title">
<br>
<span style="text-align:center; font-weight:bolder;font-size:15px; display:block">Make this Hindi Site Popular. <br>
Please Share.</span>
<br>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_linkedin"></a>
<a class="addthis_button_preferred_5"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=kuldeep06march"></script>
<!-- AddThis Button END -->
<br>
</div>
I have set timeout 30000 ms in setTimeout JS Function so after 30 seconds, a dialog box appears and asks for "Sharing". The problem is that after closing the Dialog Box, it appears again and again. See the live working code at "http://www.bccfalna.com"
How Can I solve this problem?
$("#dialog").dialog({ autoOpen: false,
modal: true,
position: 'center',
resizable: false,
draggable: false,
width: 280,
height: 530 ,
closeText: 'hide',
closeOnEscape: true,
hide: 'slide',
show: 'slide',
title: 'Help!' }).dialog();
and
var timeoutId = setTimeout(function(){
$("#dialog").dialog("open");
clearTimeout(timeoutId)
}, 30000);
Try this.
Well, in the link you provided you have the code snippet above wrapped in:
$window.scroll(function() {
Which means every time the user scrolls, you are creating a new timeout. :)

Categories

Resources