モーダルダイアログがすぐに閉じる

Question

モーダルダイアログに問題があります。ユーザーが押して入力ボタンを押すとアクティブになり、次にモーダルダイアログが表示され、何もせずにすぐに消えます。

コード：以外

$('form').submit(function(e) { 
        var dialog = $("#dialog"); 
        if ($("#dialog").length == 0) { 
         dialog = $('<div id="dialog" style="display:hidden"> Los datos ingresados son:</div>').appendTo('body'); 
        } 
        dialog.load(
         $("#dialog").dialog({ 
          close: function(event, ui) { 
           dialog.remove(); 
          }, 
          resizable: false, 
          //height: 140, 
          //width: 460 
          modal: true, 
          buttons: { 
           "Ok": function() { 
            $(this).dialog("close"); 
           }, 
           Cancel: function() { 
            $(this).dialog("close"); 
           } 
          } 
         }) 
        ); 
        return true; 
       }); 

、どのように私は、ユーザーがモーダルダイアログで[OK]を押すと、ことを確認することができ、イベントは継続しますか？

あなたが試すことができます私の理解あたりとして

Answer 1

（e.preventDefaultを追加）。

と後のあなたは、あなたのAタグのhrefは「＃」であることを確認できたisConfirmed

var isConfirmed = false; 


$('form').submit(function(e) { 
       if(!isConfirmed){ 
        var dialog = $("#dialog"); 
        if ($("#dialog").length == 0) { 
         dialog = $('<div id="dialog" style="display:hidden"> Los datos ingresados son:</div>').appendTo('body'); 
        } 
        dialog.load(
         $("#dialog").dialog({ 
          close: function(event, ui) { 
           dialog.remove(); 
          }, 
          resizable: false, 
          //height: 140, 
          //width: 460 
          modal: true, 
          buttons: { 
           "Ok": function() { 
            $(this).dialog("close"); 
            isConfirmed=true; 
            $("form").submit(); 
           }, 
           Cancel: function() { 
            $(this).dialog("close"); 
           } 
          } 
         }) 
        ); 
        e.preventDefault(); 
        return false; 
       } 
       else 
        return true; 
       }); 

Answer 2

：

buttons: { 
           "Ok": function() { 
            //Call your event here. 
            $(this).dialog("close"); 
           }, 
           Cancel: function() { 
            $(this).dialog("close"); 
           } 
          } 

は、この情報がお役に立てば幸いです。

Answer 3

イベントが期待どおりに伝播することを確認するには、対応するメソッドからtrueを返します。

"Ok": function() { 
    return true; 
} 

Answer 4

trueに設定し、[OK]ボタンをクリックしたときにフォームを送信します。私はこれらのリンクを持っていなかったし、自動提出する。ハッシュでは期待どおりに動作します。

Answer 5

私は同じ問題を抱えていましたが、私はModal Dialogボックスの高度なバージョンに移行しました。作成者は何らかの理由でそれをNifty Dailogボックスと名づけました。

あなたは、私は自分のコードの末尾に、ブートストラップファイルの両方を持っていたTympanus

Answer 6

から資料を入手することができます

<script src="js/bootstrap.min.js"></script> 
<script src="js/bootstrap.js"></script> 

は、その後、私はbootsrap.min.jsを削除し、それが働いていた、また、私はで含まend：

<script> 
    $(document).ready(function(){ 
    $('[data-toggle="tooltip"]').tooltip(); 
    }); 
</script>