I explain to you, I am making a modal window, that is, when you click on a button this window will be displayed. Well, it works correctly for me, what happens is that inside my modal there is a button called exit so that it exits the modal. But when I open the modal and click anywhere it disappears which I would like the modal to disappear as long as they press the exit button.
This is my current code in 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 SHOWING THE MODAL
<script>
$(document).on('click', '#Crear', function () {
$('#ModalCrear').modal('show');
});
$(document).on('click', '#agregar_nombres', function () {
$('#ModalAgregarNombre').modal('show');
});
</script>
To prevent this there are two attributes you should use, all of which are specified on its official modals-options page
data-backdrop="static"
PreventCLOSE
by clicking outside the Modal windowdata-keyboard="false"
PreventCLOSE
using ESC key .Its use can be directly in HTML
Or via JavaScript
I did not notice what type of Plugin was used in its code , so I added this answer, but in reality the answer for the Plugin used is that of @Roberto León, these options are for Bootstrap Modal
The jquery.modal.js that you use in example 5 indicates how to do it:
See Options for more details.
Adding how the code would look thanks to the response of the good Dev.Joel It would be as follows:
PS: accept Dev.Joel 's answer , it's well explained :D