为什么不将ibm.com显示为400x500px模式？该部分似乎是正确的,但它不会导致弹出模式出现.
<!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>
Rui*_*ima 56
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');
在函数内使用它.如果您真的想要将外部URL加载为IFRAME,这非常有用.还要确保在自定义jqueryUI中有对话框.
Rob*_*ben 15
编辑:如果你使用的是最新版本的jQueryUI,这个答案可能已经过时了.
对于触发对话框的锚点 -
<a href="http://ibm.com" class="example">
这是脚本 -
$('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");
}
以下内容将在任何网站上开箱即用:
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="dialogBox" style="border:1px solid gray;">
<a href="/" class="exampleLink">Test</a>
<!-- TODO: Change above href -->
<!-- NOTE: Must be a local url, not cross domain -->
</div>
<script type="text/javascript">
var $modalDialog = $('<div/>', {
'class': 'exampleModal',
'id': 'exampleModal1'
})
.appendTo('body')
.dialog({
resizable: false,
autoOpen: false,
height: 300,
width: 350,
show: 'fold',
buttons: {
"Close": function () {
$modalDialog.dialog("close");
}
},
modal: true
});
$(function () {
$('a.exampleLink').on('click', function (e) {
e.preventDefault();
// TODO: Undo comments, below
//var url = $('a.exampleLink:first').attr('href');
//$modalDialog.load(url);
$modalDialog.dialog("open");
});
});
</script>