使用iframe URL的jQuery UI对话框 [英] jQuery UI Dialog using iframe URL

问题描述

我使用nyroModal和Fancybox作为网站的工具，但在这个例子中我必须使用jQuery UI的对话框工具。我需要此对话框来加载页面。我相信我之前已经做过这件事，但我遇到的一切似乎都比应有的复杂。我不能用... ...

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...

$( "#dialog" ).dialog({
      autoOpen: false,
      modal: true,
      url: http://www.google.com
      });

<button id="dialog">Open Dialog</button>

并在简单的iframe中打开页面？提前致谢。

and have the page open in a simple iframe? Thanks in advance.

我确实发现我有这段代码，

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.

推荐答案

url 不是 jQuery UI对话框。

对我有用的一件事就是拥有 iframe 在你的对话框 div 里面，并在 open 事件中设置其url属性。

One of the things that has worked for me is to have an iframe inside the div that is your dialog, and set its url property on the open event.

喜欢：

<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上需要一些样式才能让它看起来不错。

You would find that you need some styling on the iframe to get it look nice, though.

#myIframe{
  height: 580px;
}

编辑：工作版 - http://jsbin.com/uruyob/1/edit

Working version - http://jsbin.com/uruyob/1/edit

这篇关于使用iframe URL的jQuery UI对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！