我给你解释一下,我正在制作一个模态窗口,即当你点击一个按钮时,就会显示这个窗口。好吧,它对我来说可以正常工作,发生的事情是在我的模态中有一个名为 exit 的按钮,以便它退出模态。但是当我打开模态并单击它消失的任何地方时,只要他们按下退出按钮,我希望模态消失。
这是我在 Form.aspx 中的当前代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.modal.js"></script>
<link href="css/jquery.modal.css" />
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Nombre :</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Apellido :</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<button type="button" runat="server" id="Crear" class="btn btn-primary">
<span class="fa fa-plus"></span>Agregar
</button>
</tr>
<div id="ModalCrear" class="modal fade" role="dialog" style="overflow-y: scroll;">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" role="form" id="form-crear">
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>
<span class="hidden-xs">Cerrar</span>
</button>
</div>
</form>
</div>
</div>
</div>
</table>
</form>
<script>
$(document).on('click', '#Crear', function () {
$('#ModalCrear').modal('show');
});
$(document).on('click', '#agregar_nombres', function () {
$('#ModalAgregarNombre').modal('show');
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
显示模式的脚本
<script>
$(document).on('click', '#Crear', function () {
$('#ModalCrear').modal('show');
});
$(document).on('click', '#agregar_nombres', function () {
$('#ModalAgregarNombre').modal('show');
});
</script>
为了防止这种情况,您应该使用两个属性,所有这些属性都在其官方modals-options页面上指定
data-backdrop="static"
CLOSE
通过单击模态窗口外部来 防止data-keyboard="false"
防止CLOSE
使用 ESC 键。它的使用可以直接在HTML中
或通过 JavaScript
我没有注意到它的代码中使用了什么类型的插件,所以我添加了这个答案,但实际上使用的插件的答案是@Roberto León,这些选项适用于 Bootstrap Modal
您在示例 5中使用的jquery.modal.js指示如何执行此操作:
有关更多详细信息,请参阅选项。
由于好的 Dev.Joel 的响应,添加代码的外观如下:
PS:接受Dev.Joel的回答,这很好解释:D