您好，我是第一次使用 Bootstrap，但在单击提交按钮时，我的模态表单无法保持打开状态。 我已经搜索过，但所有相关问题都处理略有不同的问题（下面的示例）。
【问题讨论】：
标签： javascript css twitter-bootstrap modal-dialog
仅使用以下代码：-
$(document).ready(function () {
$("#myModal").modal('show');
});
并在更新面板中编写您的 html 代码，然后从按钮中删除 data-dismiss="modal"。希望它对你有用。
【讨论】：
我遇到了类似的问题，我使用模态作为表单，所以我最初无法设置data-backdrop="static" data-keyboard="false"，因为我希望用户能够关闭它，只要他没有提交表单。一旦他提交了表单，我想阻止他关闭表单模式。这是我可以绕过的方法。
$('#modalForm').on('submit', function() {
$(#modal).on('hide.bs.modal', function ( e ) {
e.preventDefault();
})
});
【讨论】：
使用它来防止引导模式窗口在提交表单时关闭
$( "form" ).submit(function( event ) {
event.preventDefault();
});
【讨论】：
如果您想添加多个数据并且希望模态保持打开状态，请使用
<button type="button"></button>
如果你想在提交数据后关闭模态框，你必须使用
<button type="submit"></button>
【讨论】：
这就是我在程序中的做法，希望对您有所帮助。
这是触发模式的按钮。在这里，我禁用了模式外的键盘和鼠标单击。
<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();会阻止表单提交的默认动作，所以modal会保留。
function myFunction() {
$("form").on("submit", function (event) {
event.preventDefault();
$.ajax({
url: "yoururl",
type: "POST",
data: yourData,
success: function (result) {
console.log(result)
}
});
})
}
【讨论】：
删除以下内容：
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
【讨论】：
看 => 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：
【讨论】：