Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

load external URL into modal jquery ui dialog

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> 
like image 922
verlager Avatar asked Aug 27 '12 06:08

verlager


2 Answers

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.

like image 178
Rui Lima Avatar answered Nov 09 '22 02:11

Rui Lima


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");          } 
like image 38
Robin Maben Avatar answered Nov 09 '22 03:11

Robin Maben