0

5 つの jQuery ダイアログ モーダルを使用して、ウィザードのようなエクスペリエンスを作成しようとしています。最初のモーダルから新しいモーダルを起動して、2 番目のモーダルを開きたいのですが、最初のモーダルを閉じます。三代目、四代目、五代目も同様。

他のモーダル内にネストされたモーダルを問題なく開くことができますが、次のモーダルが開いたときに前のモーダルが閉じません。最終的に、5 つのウィンドウが重なり合って開いています。

5つのモーダルのうち2つを開くために使用しているコードは次のとおりです（残りは同じロジックを使用して順番に進みます：

<script>
  $(function() {
   $( "#modal_1" ).dialog({position:['middle',60],
        open: function(event, ui) {  
        dialogClass: 'ui-widget-shadow',
        modal: true,    
        autoOpen: false,
        width: '950px',
        close: function(ev, ui) {$(this).close();}
        });

    $( ".modal_1open" ).click(function() {
      $( "#modal_1" ).dialog( "open" );
        return false;
        });

    $( ".btnNext" ).click(function(){
      $('.ui-dialog-content').dialog( "close" );
        })
    });
</script>
<script>
  $(function() {
   $( "#modal_2" ).dialog({position:['middle',60],
        open: function(event, ui) {  
        dialogClass: 'ui-widget-shadow',
        modal: true,    
        autoOpen: false,
        width: '950px',
        close: function(ev, ui) {$(this).close();}
        });

    $( ".modal_2open" ).click(function() {
      $( "#modal_2" ).dialog( "open" );
        return false;
        });

    $( ".btnNext" ).click(function(){
      $('.ui-dialog-content').dialog( "close" );
        })
    });
</script>

html の例を次に示します。

<a class="button btnNext">Continue</a> <!--this is the button inside the modal that is supposed to fire the next modal-->

<div style="display:none" id="modal_1" title="Login">
  <!--#include file="modal_1.asp"-->
</div>
<div style="display:none;" id="modal_2" title="Page Two Title">
  <!--#include file="modal_2.asp"-->
</div>

クローズ機能を次のオープニングにバインドできると思いますが、方法がわかりません。何か助けて??

4

1 に答える 1

1

私はあなたのコードを手がかりにダイエットし、いくつかのテストを行いました。オプションの割り当てを誤っていたIMO。close: ボタンではなく、イベント ハンドラー用です。ボタンの定義にはボタン フィールドを使用します。クリックするとダイアログが閉じ、次のダイアログが開きます...

 $(this).dialog("close");
 $("#modal_2").dialog("open");

以下の私の簡単なバージョン：

$(function() {
$("#modal_1").dialog({
    modal: true,
    autoOpen: true,
    buttons: [{text: "Next",click: function() {
                $(this).dialog("close");
                $("#modal_2").dialog("open");
            }
        }]
});

$("#modal_2").dialog({
    modal: true,
    autoOpen: false,
    buttons: [{text: "Next",click: function() {
                $(this).dialog("close");
                $("#modal_1").dialog("open");
            }}]
});
});

ここでテストしました： http://jsfiddle.net/JmgKS/8/

于 2013-01-20T01:22:19.083 に答える