使用iframe URL的jQuery UI对话框

Question

我已经使用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>

但它没有加载实际的页面.

Answer 1

url不是jQuery UI对话框中的选项之一.

对我有用的一件事就是让你的对话框iframe内部div,并在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