私の自作モーダルスクリプトを修正するにはどうすればいいですか？それとも何か別の方法がありますか？

Question

現在、モーダルiframeを取得するためにblockUI、モーダル「yes/no」 - ダイアログを取得するためにjquery UI dialogを使用しています。我々は、これら2つのコンポーネントで作業している理由
の理由は、彼らの両方がjqueryのUIのテーマに依存している

• ある - そうモーダル要素のこれら2種類の間には休憩はありません。
• それはjqueryのUIダイアログで「はい/いいえ」-dialogsを取得するには本当に簡単だし、
• これらのボタンにイベントを取り付けるblockUIは、私たちが今のように、代替を探している

本当に多くの軽量ですモーダルのiframeを取得するために使用されるコードは、ビットバギーです：

var popups = {}; 

function showPopup(settings) { 
    var target = settings.target; 
    var $popup = popups[target]; 
    if ($popup) { 
     $popup.attr('src', 'blankPage.html'); 
    } 
    else { 
     $popup = $('<iframe/>'); 
     $popup.appendTo('form'); 
     $popup.css('display', 'none'); 
     $popup.attr('frameborder', 0); 
     $popup.dialog({ 
      'title': settings.title, 
      'autoOpen': false, 
      'modal': true, 
      'width': settings.width, 
      'height': settings.height, 
      'draggable': false, 
      'resizable': false, 
      'open': function() { 
       var $widget = $popup.dialog('widget'); 
       $widget.css('position', 'fixed'); 
       $widget.css('top', '50%'); 
       $widget.css('margin-top', $widget.height()/2 * -1); 
       $widget.css('left', '50%'); 
       $widget.css('margin-left', $widget.width()/2 * -1); 
       $popup.css('width', settings.width); 
       $popup.css('padding', '0px'); 
       $popup.attr('src', settings.target); 
      } 
     }); 
     popups[target] = $popup; 
    } 
    $popup.dialog('open'); 
} 

それは非常によく動作しますが、、1つのダイアログを開くためにクリックをして、その後閉じて、それを再開するとき、それは前のページを表示いくつかのms - これは本当に扱いにくいかもしれません。モーダルコンテンツにflそれ自体が

修正する機会はありますか、そこには私たちのニーズに合った代替スクリプトがありますか？

Answer 1

ソリューションは非常に簡単です：

var popups = {}; 

function showPopup(settings) { 
    var target = settings.target; 
    var $popup = popups[target]; 
    if (!$popup) { 
     $popup = $('<iframe/>'); 
     $popup.appendTo('form'); 
     $popup.css('display', 'none'); 
     $popup.attr('frameborder', 0); 
     $popup.dialog({ 
      'title': settings.title, 
      'autoOpen': false, 
      'modal': true, 
      'width': settings.width, 
      'height': settings.height, 
      'draggable': false, 
      'resizable': false, 
      'open': function() { 
       var $widget = $popup.dialog('widget'); 
       $widget.css('position', 'fixed'); 
       $widget.css('top', '50%'); 
       $widget.css('margin-top', $widget.height()/2 * -1); 
       $widget.css('left', '50%'); 
       $widget.css('margin-left', $widget.width()/2 * -1); 
       $popup.css('width', settings.width); 
       $popup.css('padding', '0px'); 
       $popup.attr('src', settings.target); 
      }, 
      'close': function() { 
       $popup.attr('src', 'blankPage.html'); 
      } 
     }); 
     popups[target] = $popup; 
    } 
    $popup.dialog('open'); 
} 

はまだ...私は、任意の代替では非常に興味があります！

Answer 2

私はこのシンプルモーダルを使用します。

モーダルをすばやく簡単にお探しの場合は、セットアップが非常に簡単です。

http://deseloper.org/read/2008/04/a-simple-modal/

それを試してみます。それは私にとってうまくいっている。

ありがとうございました