[英]jQuery UI Dialog using iframe URL
我已經使用nyroModal和Fancybox作為網站的工具,但在這個例子中我必須使用jQuery UI的對話框工具。 我需要此對話框來加載頁面。 我相信我以前做過這件事,但我遇到的一切似乎都比應有的復雜。 我不能用...
$( "#dialog" ).dialog({
autoOpen: false,
modal: true,
url: http://www.google.com
});
<button id="dialog">Open Dialog</button>
並在一個簡單的iframe中打開頁面? 提前致謝。
我確實發現我有這個代碼,
<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>
但它沒有加載實際的頁面。
url
不是jQuery UI對話框中的選項之一。
對我iframe
一件事是在div
中有一個iframe
作為你的對話框,並在open
事件上設置它的url屬性。
喜歡:
<div id="dialog">
<iframe id="myIframe" src=""></iframe>
</div>
<button id="dialogBtn">Open Dialog</button>
和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');
});
你會發現你需要在iframe上使用一些樣式才能讓它看起來很漂亮。
#myIframe{
height: 580px;
}
編輯:工作版 - http://jsbin.com/uruyob/1/edit
基於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;
});
});
我嘗試了類似的事情。 檢查這個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" );
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.