CSS 防止引导模式窗口在表单提交时关闭
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18893814/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
prevent bootstrap modal window from closing on form submission
提问by U r s u s
Hi I'm using Bootstrap for the first time and I can't get my modal form to stay open on clicking the submit button. I've searched SO but all related questions deal with slightly different issues (example below).
嗨，我是第一次使用 Bootstrap，我无法在单击提交按钮时让我的模态表单保持打开状态。我已经搜索过 SO，但所有相关问题都处理略有不同的问题（下面的示例）。
采纳答案by ZooL
look at => http://getbootstrap.com/2.3.2/javascript.html#modals
看看 => http://getbootstrap.com/2.3.2/javascript.html#modals
use
用
data-backdrop="static"
or
或者
$("#yourModal").modal({"backdrop": "static"});
Edit1 :
编辑1：
on your link opening your modal ==>
在您的链接上打开您的模态 ==>
<a href="#" onclick="$('#yourModal').modal({'backdrop': 'static'});" class="btn btn-primary">yourModal</a>
Edit2 :
编辑2：
回答by Jelgab
Remove the following:
删除以下内容：
data-dismiss = "modal"
From the button that should not close the dialog. After that, you can close the dialog by using $( "#TheDialogID" ).modal( "hide" ). Example:
从不应关闭对话框的按钮。之后，您可以使用 $( "#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 code:
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
回答by Saahithyan Vigneswaran
This is how I did in my program, hope it helps.
这就是我在我的程序中所做的，希望它有所帮助。
This is the button which triggers the modal. Here I have disable the keyboard and mouse click outside the modal.
这是触发模态的按钮。在这里，我禁用了模态外的键盘和鼠标单击。
<button type="button" data-toggle="modal" data-target="#modalDivId"
data-backdrop="static" data-keyboard="false">
This is the modal div, with a form and a submit button. Replace ...with your modal content.
这是模态 div，带有一个表单和一个提交按钮。替换...为您的模态内容。
<div class="modal fade" id="modalDivId" role="dialog">
<form>
...
<button type="submit" onClick="myFunction()" class="btn btn-success">
Submit
</button>
</form>
</div>
Finally the function which triggers when you click submit button. Here event.preventDefault();will prevent the default action of form submit, so that the modal will remain.
最后是点击提交按钮时触发的功能。这里event.preventDefault();将阻止表单提交的默认操作，以便保持模态。
function myFunction() {
$("form").on("submit", function (event) {
event.preventDefault();
$.ajax({
url: "yoururl",
type: "POST",
data: yourData,
success: function (result) {
console.log(result)
}
});
})
}
回答by Gadhia Reema
If you want to add multiple data and you want modal to stay open use
如果要添加多个数据并且希望模态保持开放使用
<button type="button"></button>
<button type="button"></button>
and If you want to close the modal after submitting data you must use
如果您想在提交数据后关闭模态，则必须使用
<button type="submit"></button>
<button type="submit"></button>
回答by nnattawat
I ran into the similar problem where I use modal as a form so I cannot initially set data-backdrop="static" data-keyboard="false"because I want the user to be able to close it as long as he has not submitted the form. Once he has submitted the form, I want to prevent him from closing the form modal. Here is how I can get around.
我遇到了类似的问题，我使用模态作为表单，所以我最初无法设置，data-backdrop="static" data-keyboard="false"因为我希望用户能够关闭它，只要他没有提交表单。一旦他提交了表单，我想阻止他关闭表单模式。这是我可以绕过的方法。
$('#modalForm').on('submit', function() {
$(#modal).on('hide.bs.modal', function ( e ) {
e.preventDefault();
})
});
回答by in?ynier umair
use below code only:-
仅使用以下代码：-
enter $(document).ready(function () {
$("#myModal").modal('show');
});
});
and write your html code in update panel then remove data-dismiss="modal" from the button. Hope it works for you.
并在更新面板中编写您的 html 代码，然后从按钮中删除 data-dismiss="modal"。希望对你有效。
回答by Rajiv Sharma
Use this to prevent bootstrap modal window from closing on form submission
使用它来防止引导模式窗口在表单提交时关闭
$( "form" ).submit(function( event ) {
event.preventDefault();
});
