将外部 URL 加载到模态 jquery ui 对话框中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12137033/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
load external URL into modal jquery ui dialog
提问by verlager
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.
为什么这不将 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>
回答by Rui Lima
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.
在函数中使用它。如果您真的想将外部 URL 作为 IFRAME 加载，这很好。还要确保在您的自定义 jqueryUI 中有对话框。
回答by Robin Maben
EDIT:This answer might be outdated if you're using a recent version of jQueryUI.
编辑：如果您使用的是最新版本的 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");
}
回答by Jason Williams
The following will work out of the box on any site:
以下将在任何站点上开箱即用：
<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>回答by Khadka Pushpendra
if you are using **Bootstrap** this is solution,
$(document).ready(function(e) {
$('.bootpopup').click(function(){
var frametarget = $(this).attr('href');
targetmodal = '#myModal';
$('#modeliframe').attr("src", frametarget );
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<a href="http://twitter.github.io/bootstrap/" title="Edit Transaction" class="btn btn-primary btn-lg bootpopup" data-toggle="modal" data-target="#myModal">
Launch demo modal
</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<iframe src="" id="modeliframe" style="zoom:0.60" frameborder="0" height="250" width="99.6%"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>回答by siddhartha attri
I did it this way, where 'struts2ActionName' is the struts2 action in my case. You may use any url instead.
我是这样做的，在我的例子中，'struts2ActionName' 是 struts2 的动作。您可以改用任何网址。
var urlAdditionCert =${pageContext.request.contextPath}/struts2ActionName";
$("#dialogId").load( urlAdditionCert).dialog({
modal: true,
height: $("#body").height(),
width: $("#body").width()*.8
});
回答by Tiquelou
Modals always load the content into an element on the page, which more often than not is a div. Think of this divas the iframeequivalent 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:
模态总是将内容加载到页面上的元素中，通常是div. 它想象div为iframe相当于当谈到jQuery用户界面对话框。现在，这取决于您的要求是想要驻留在页面内的静态内容还是想要从其他位置获取内容。您可以使用此代码，看看它是否适合您：
<!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 thismight help. All this information you will find in the linkas suggested by @Robin.
但是，您应该记住一些事项。您将无法在本地系统上加载远程 URL，如果要加载远程 URL，则需要上传到服务器。即便如此，您也只能加载属于同一域的 URL；例如，如果您将此文件上传到“www.example.com”，则您只能访问“www.example.com”上托管的文件。对于加载外部链接，这可能会有所帮助。您可以在@Robin 建议的链接中找到所有这些信息。
