使用 iframe URL 的 jQuery UI 对话框

2022-01-15 00:00:00 iframe dialog modal-dialog javascript

我使用 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 对话框.

对我有用的一件事是在 div 内有一个 iframe 是您的对话框，并在 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

相关文章