Предотвращать закрытие модального окна bootstrap при отправке формы

Ответ 1

посмотреть = = http://getbootstrap.com/2.3.2/javascript.html#modals

использование

data-backdrop="static"

или

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

Edit1:

на вашей ссылке, открывающей ваш модальный == >

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

Edit2:

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

Ответ 2

Удалите следующее:

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

Ответ 3

Вот как я это сделал в своей программе, надеюсь, что это поможет.

Это кнопка, которая запускает модальную. Здесь я отключил клавиатуру и щелчок мыши вне модального.

<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(); будет препятствовать действию по умолчанию для формы submit, так что модальное значение останется.

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

Ответ 4

Если вы хотите добавить несколько данных, и вы хотите, чтобы модал оставался открытым, используйте

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

и если вы хотите закрыть модальный после отправки данных, вы должны использовать

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

Ответ 5

используйте только код: -

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

});

и напишите свой html-код в панели обновления, а затем удалите данные-увольнение = "модальный" с кнопки. Надеюсь, это сработает для вас.

Ответ 6

Используйте это для предотвращения закрытия модального окна начальной загрузки при отправке формы

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

Ответ 7

Я столкнулся с подобной проблемой, когда я использую модал в качестве формы, поэтому я не могу изначально установить data-backdrop="static" data-keyboard="false" потому что я хочу, чтобы пользователь мог закрыть его, пока он не отправил форма. Как только он отправит форму, я хочу, чтобы он не закрывал модальную форму. Вот как я могу обойти.

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