why doesn't this display ibm.com into a 400x500px modal? The section appears to be correct, but it doesn't cause the popup modal to appear.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.23.custom.css"/> </head> <body> <p>First open a modal <a href="http://ibm.com" class="example"> dialog</a></p> </body> <!--jQuery--> <script src="http://code.jquery.com/jquery-latest.pack.js"></script> <script src="js/jquery-ui-1.8.23.custom.min.js"></script> <script type="text/javascript"> function showDialog(){ $(".example").dialog({ height: 400, width: 500, modal: true return false; } </script> </html>
var page = "http://somurl.com/asom.php.aspx"; var $dialog = $('<div></div>') .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>') .dialog({ autoOpen: false, modal: true, height: 625, width: 500, title: "Some title" }); $dialog.dialog('open');
Use this inside a function. This is great if you really want to load an external URL as an IFRAME. Also make sure that in you custom jqueryUI you have the dialog.
EDIT: This answer might be outdated if you're using a recent version of jQueryUI.
For an anchor to trigger the dialog -
<a href="http://ibm.com" class="example">
Here's the script -
$('a.example').click(function(){ //bind handlers var url = $(this).attr('href'); showDialog(url); return false; }); $("#targetDiv").dialog({ //create dialog, but keep it closed autoOpen: false, height: 300, width: 350, modal: true }); function showDialog(url){ //load content and open dialog $("#targetDiv").load(url); $("#targetDiv").dialog("open"); }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With