Привет, я использую Bootstrap в первый раз, и я не могу заставить мою модальную форму оставаться открытой при нажатии кнопки отправки. Я искал SO, но все связанные с ним вопросы касаются немного разных проблем (пример ниже).
Предотвращать закрытие модального окна 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:
Ответ 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">×</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();
})
});