iQueryを表示するjQuery Thickboxなど

StackOverflow https://stackoverflow.com/questions/210637

  •  03-07-2019
  •  | 
  •  

質問

画像付きのモーダルダイアログを表示するために jQUery thickbox を見てきました。しかし、今では、同様の方法でiFrameを含むコンテンツの非表示divを、コンテンツを開くためのリンクとともに表示する必要があります。だから私はこのようなものを持っているでしょう。

<a href="">Open window in Modal Dialog</a>

<div id="myContent">
    <h1>Look at me!</h1>
    <iframe src="http://www.google.com" />
</div>

そしてダイアログに表示する必要があります。可能ですか？

役に立ちましたか？

解決

Thickboxはそれをサポートしています。 http://jquery.com/demo/thickbox/

のインラインコンテンツデモをご覧ください。

他のヒント

jqModalを使用していますが、うまく動作し、軽量です。 iFrameで動作させる方法は次のとおりです

これはhtml

です 
<div class="jqmWindow" id="modalDialog">  
    <iframe frameborder="0" id="jqmContent" src=""> 
    </iframe>  
</div>

そして呼び出しコード

function showModal(url, height, width)
{    
    var dialog = $('#modalDialog')
        .jqm({ 
            onShow: function(h) {
                var $modal = $(h.w);                
                var $modalContent = $("iframe", $modal); 
                $modalContent.html('').attr('src', url); 
                if (height > 0) $modal.height(height);    
                if (width > 0) $modal.width(width);                
                h.w.show();          
            } 
         }).jqmShow();        
}

function closeModal(postback)
{
    $('#modalDialog').jqmHide();
}

ベースビューとしてiFrameを使用するjQueryUIのダイアログの拡張機能があります...これはいくつかのデフォルトを調整します（[OK]ボタンまたは[キャンセル]ボタンを追加するなど）。これは古い質問ですが、ただそれを人々に知らせたいだけです。

http://plugins.jquery.com/project/jquery-framedialog

以下に修正の詳細を示します。これらの変更をJQueryプラグインに統合できることを願っています。 jquery 1.4.2とjquery UI 1.8.2を使用しています。

jquery-frameddialog.jsで、幅と高さを（pxではなく）100％に変更し、jQueryUI 1.7のFIXを次のように変更しました。

wrap.bind('dragstart', function() { overlay.show(); })
  .bind('dragstop', function() { overlay.hide(); })
  .bind('resizestart', function() { overlay.show(); })
  .bind('resizestop', function() { overlay.hide(); });
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top