Javascript 使用 iframe URL 的 jQuery UI 对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14570026/
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
jQuery UI Dialog using iframe URL
提问by triplethreat77
I've used nyroModal and Fancybox as tools for websites but in this instance I must use jQuery UI's dialog tool. I need this dialog to load a page. I believe I've done this before but everything I come across seems more complex than it should be. Can't I use something like...
我已经使用 nyroModal 和 Fancybox 作为网站工具，但在这种情况下，我必须使用 jQuery UI 的对话框工具。我需要这个对话框来加载一个页面。我相信我以前做过这件事，但我遇到的一切似乎都比它应该的复杂。我不能用类似的东西吗...
$( "#dialog" ).dialog({
autoOpen: false,
modal: true,
url: http://www.google.com
});
<button id="dialog">Open Dialog</button>
and have the page open in a simple iframe? Thanks in advance.
并在一个简单的 iframe 中打开页面？提前致谢。
I did find that I have this code,
我确实发现我有这个代码，
<script>
//$.fx.speeds._default = 500;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function () {$(this).load('nom-1-dialog-add-vessels.html');},
height: 'auto',
width: 'auto',
resizable: true,
title: 'Vessels' });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
</script>
<div id="dialog"></div><button id="opener">Open Dialog</button>
but it's not loading the actual page.
但它没有加载实际页面。
回答by Hari Pachuveetil
urlis not one of the options in jQuery UI dialog.
url不是jQuery UI 对话框中的选项之一。
One of the things that has worked for me is to have an iframeinside the divthat is your dialog, and set its url property on the openevent.
对我有用的一件事是有一个iframe里面div是你的对话框，并在open事件上设置它的 url 属性。
Like:
喜欢：
<div id="dialog">
<iframe id="myIframe" src=""></iframe>
</div>
<button id="dialogBtn">Open Dialog</button>
And JS:
和JS：
$("#dialog").dialog({
autoOpen: false,
modal: true,
height: 600,
open: function(ev, ui){
$('#myIframe').attr('src','http://www.jQuery.com');
}
});
$('#dialogBtn').click(function(){
$('#dialog').dialog('open');
});
You would find that you need some styling on the iframe to get it look nice, though.
不过，您会发现 iframe 需要一些样式才能让它看起来不错。
#myIframe{
height: 580px;
}
EDIT: Working version - http://jsbin.com/uruyob/1/edit
编辑：工作版本 - http://jsbin.com/uruyob/1/edit
回答by Muthukumar
Based on Floyd Pinkand your code, I have consolidated an code. Check here http://jsfiddle.net/Nz9Q8/
根据Floyd Pink和您的代码，我整合了一个代码。在这里检查http://jsfiddle.net/Nz9Q8/
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function (ev, ui) {
$('#myIframe').src = 'http://www.w3schools.com';
},
height: 'auto',
width: 'auto',
resizable: true,
title: 'Vessels'
});
$("#opener").click(function () {
$("#dialog").dialog("open");
return false;
});
});
回答by Muthukumar
I tried a similar thing. Check this http://jsfiddle.net/P2Q5U/
我尝试了类似的事情。检查这个http://jsfiddle.net/P2Q5U/
<div id="dialogContent" title="Basic dialog">
<iframe src="http://www.w3schools.com"></iframe>
</div>
<button id="dialog">Open Dialog</button>
$(function () {
$("#dialogContent").dialog({
autoOpen: false,
modal: true
});
$('#dialog').click(function () {
$("#dialogContent").dialog( "open" );
});
});
