12

WebサイトのツールとしてnyroModalとFancyboxを使用しましたが、この場合、jQueryUIのダイアログツールを使用する必要があります。ページをロードするには、このダイアログが必要です。私は以前にこれを行ったことがあると思いますが、私が遭遇するすべてのものは、本来あるべきよりも複雑に見えます。こんなものは使えない…

$( "#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>

ただし、実際のページは読み込まれません。

4

3 に答える 3

34

urljQueryUIダイアログのオプションの1つではありません。

私にとってうまくいったことの1つは、ダイアログであるiframe内部を持ち、イベントdivにそのurlプロパティを設定することです。open

好き：

<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

于 2013-01-28T20:05:23.067 に答える
3

フロイドピンクとあなたのコードに基づいて、私はコードを統合しました。こちらをチェック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;
  });
});
于 2013-01-28T20:19:05.697 に答える
0

同様のことを試しました。これをチェックしてください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" );
   });
 });
于 2013-01-28T20:02:38.663 に答える