web-dev-qa-db-ja.com

bootstrap=フォーム送信時にモーダルウィンドウが閉じないようにする

こんにちはBootstrapを初めて使用していますが、送信ボタンをクリックしてもモーダルフォームを開いたままにできません。 SOを検索しましたが、関連する質問はすべてわずかに異なる問題を扱っています（下の例を参照）。

Twitter bootstrapモーダルウィンドウが閉じないようにする

javascriptcsstwitter-bootstrapmodal-dialog
15
U r s u s

=> http://getbootstrap.com/2.3.2/javascript.html#modals を見てください

つかいます

data-backdrop="static"

または

$("#yourModal").modal({"backdrop": "static"});

編集1：

あなたのモーダルを開くリンク==>

<a href="#" onclick="$('#yourModal').modal({'backdrop': 'static'});" class="btn btn-primary">yourModal</a>

編集2：

http://jsfiddle.net/BVmUL/39/

13
ZooL

以下を削除します。

data-dismiss = "modal"

ダイアログを閉じてはならないボタンから。その後、$（ "#TheDialogID"）.modal（ "hide"）を使用してダイアログを閉じることができます。例：

<!--<SimpleModalBox>-->
<div class="modal fade" id="SimpleModalBox" tabindex="-1" role="dialog" aria-labelledby="SimpleModalLabel" aria-hidden="true">
  <!--<modal-dialog>-->
  <div class = "modal-dialog">

    <!--<modal-content>-->
    <div class = "modal-content">

      <div class = "modal-header">
        <button type = "button" class = "close" data-dismiss = "modal">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class = "modal-title" id = "SimpleModalLabel">Title for a simple modal</h4>
      </div>

      <div id="TheBodyContent" class = "modal-body">
        Put your content here
      </div>

      <div class = "modal-footer">
        <button type = "button" class = "btn btn-default" data-dismiss = "modal">Yes</button>
        <button type = "button" class = "btn btn-default" onclick="doSomethingBeforeClosing()">Don't close</button>
        <button type = "button" class = "btn btn-default" data-dismiss = "modal">Cancel</button>
      </div>

    </div>
    <!--<modal-content>-->

  </div>
  <!--/modal-dialog>-->
</div>
<!--</SimpleModalBox>-->

JavaScriptコード：

//#region Dialogs
function showSimpleDialog() {
  $( "#SimpleModalBox" ).modal();
}

function doSomethingBeforeClosing() {
  //Do something. For example, display a result:
  $( "#TheBodyContent" ).text( "Operation completed successfully" );

  //Close dialog in 3 seconds:
  setTimeout( function() { $( "#SimpleModalBox" ).modal( "hide" ) }, 3000 );
}
//#endregion Dialogs
12
Jelgab

これが私のプログラムでやったことです。

これは、モーダルをトリガーするボタンです。ここでは、モーダルの外側でキーボードとマウスのクリックを無効にします。

_<button type="button" data-toggle="modal" data-target="#modalDivId"
                data-backdrop="static" data-keyboard="false">
_

これは、フォームと送信ボタンを備えたモーダルdivです。 _..._をモーダルコンテンツに置き換えます。

_<div class="modal fade" id="modalDivId" role="dialog">
 <form>
   ...
  <button type="submit" onClick="myFunction()" class="btn btn-success">
     Submit
  </button>
 </form>
</div>
_

最後に、送信ボタンをクリックするとトリガーされる機能。ここでevent.preventDefault();は、フォーム送信のデフォルトのアクションを防止するため、モーダルは残ります。

_function myFunction() {
    $("form").on("submit", function (event) {
        event.preventDefault();
        $.ajax({
            url: "yoururl",
            type: "POST",
            data: yourData,
            success: function (result) {
                console.log(result)
            }
        });
    })
}
_
7
Saahithyan Vigneswaran

複数のデータを追加する場合、モーダルを開いたままにしておきたい場合

  • <button type="button"></button>

データを送信した後にモーダルを閉じたい場合は、使用する必要があります

  • <button type="submit"></button>
3
Gadhia Reema

モーダルをフォームとして使用しているため、最初にdata-backdrop="static" data-keyboard="false"フォームを送信していない限り、ユーザーが閉じられるようにしたいからです。彼がフォームを送信したら、フォームモーダルを閉じないようにします。これが私がどうやって回避できるかです。

$('#modalForm').on('submit', function() {
  $(#modal).on('hide.bs.modal', function ( e ) {
    e.preventDefault();
  }) 
});
0
nnattawat

これを使用して、bootstrap=モーダルウィンドウがフォーム送信時に閉じないようにします

$( "form" ).submit(function( event ) {
  event.preventDefault();
});
0
Rajiv Sharma

以下のコードのみを使用してください：-

enter $(document).ready(function () {
$("#myModal").modal('show');

}）;

更新パネルでhtmlコードを作成し、ボタンからdata-dismiss = "modal"を削除します。それがあなたに役立つことを願っています。

0
inżynier umair