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.
I did it this way, where 'struts2ActionName' is the struts2 action in my case. You may use any url instead.
var urlAdditionCert =${pageContext.request.contextPath}/struts2ActionName";
$("#dialogId").load( urlAdditionCert).dialog({
modal: true,
height: $("#body").height(),
width: $("#body").width()*.8
});
if you are using **Bootstrap** this is solution, _x000D_
_x000D_
$(document).ready(function(e) {_x000D_
$('.bootpopup').click(function(){_x000D_
var frametarget = $(this).attr('href');_x000D_
targetmodal = '#myModal'; _x000D_
$('#modeliframe').attr("src", frametarget ); _x000D_
});_x000D_
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<!-- Latest compiled and minified CSS -->_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">_x000D_
_x000D_
<!-- Optional theme -->_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">_x000D_
_x000D_
<!-- Latest compiled and minified JavaScript -->_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>_x000D_
<!-- Button trigger modal -->_x000D_
<a href="http://twitter.github.io/bootstrap/" title="Edit Transaction" class="btn btn-primary btn-lg bootpopup" data-toggle="modal" data-target="#myModal">_x000D_
Launch demo modal_x000D_
</a>_x000D_
_x000D_
<!-- Modal -->_x000D_
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">_x000D_
<div class="modal-dialog" role="document">_x000D_
<div class="modal-content">_x000D_
<div class="modal-header">_x000D_
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>_x000D_
<h4 class="modal-title" id="myModalLabel">Modal title</h4>_x000D_
</div>_x000D_
<div class="modal-body">_x000D_
<iframe src="" id="modeliframe" style="zoom:0.60" frameborder="0" height="250" width="99.6%"></iframe>_x000D_
</div>_x000D_
<div class="modal-footer">_x000D_
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>_x000D_
<button type="button" class="btn btn-primary">Save changes</button>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>The following will work out of the box on any site:
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>_x000D_
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>_x000D_
_x000D_
<div class="dialogBox" style="border:1px solid gray;">_x000D_
<a href="/" class="exampleLink">Test</a>_x000D_
<!-- TODO: Change above href -->_x000D_
<!-- NOTE: Must be a local url, not cross domain -->_x000D_
</div>_x000D_
_x000D_
<script type="text/javascript">_x000D_
_x000D_
_x000D_
var $modalDialog = $('<div/>', { _x000D_
'class': 'exampleModal', _x000D_
'id': 'exampleModal1' _x000D_
})_x000D_
.appendTo('body')_x000D_
.dialog({_x000D_
resizable: false,_x000D_
autoOpen: false,_x000D_
height: 300,_x000D_
width: 350,_x000D_
show: 'fold',_x000D_
buttons: {_x000D_
"Close": function () {_x000D_
$modalDialog.dialog("close");_x000D_
}_x000D_
},_x000D_
modal: true_x000D_
});_x000D_
_x000D_
$(function () {_x000D_
$('a.exampleLink').on('click', function (e) {_x000D_
e.preventDefault();_x000D_
// TODO: Undo comments, below_x000D_
//var url = $('a.exampleLink:first').attr('href');_x000D_
//$modalDialog.load(url);_x000D_
$modalDialog.dialog("open");_x000D_
});_x000D_
});_x000D_
_x000D_
</script>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");
}
Modals always load the content into an element on the page, which more often than not is a div. Think of this div as the iframe equivalent when it comes to jQuery UI Dialogs. Now it depends on your requirements whether you want static content that resides within the page or you want to fetch the content from some other location. You may use this code and see if it works for you:
<!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>
<div id="dialog"></div>
</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(){
//modal window start
$(".example").unbind('click');
$(".example").bind('click',function(){
showDialog();
var titletext=$(this).attr("title");
var openpage=$(this).attr("href");
$("#dialog").dialog( "option", "title", titletext );
$("#dialog").dialog( "option", "resizable", false );
$("#dialog").dialog( "option", "buttons", {
"Close": function() {
$(this).dialog("close");
$(this).dialog("destroy");
}
});
$("#dialog").load(openpage);
return false;
});
//modal window end
//Modal Window Initiation start
function showDialog(){
$("#dialog").dialog({
height: 400,
width: 500,
modal: true
}
</script>
</html>
There are, however, a few things which you should keep in mind. You will not be able to load remote URL's on your local system, you need to upload to a server if you want to load remote URL. Even then, you may only load URL's which belong to the same domain; e.g. if you upload this file to 'www.example.com' you may only access files hosted on 'www.example.com'. For loading external links this might help. All this information you will find in the link as suggested by @Robin.
Source: Stackoverflow.com