Introduction:
Here, I will explain prevention of Bootstrap modal's closing by pressing ESC key of keyboard and by clicking outside area of modal.
Description:
By default configuration of Bootstrap modal is, it will close or disappear by clicking outside area of modal or by pressing ESC key of keyboard (if modal have focus).
Sometimes it is mandatory to override this functionality and prevent default closing of modal. For example, if your site contains multi-step registration form in Bootstrap modal and user have filled details of entire form and by mistake press ESC key of keyboard or click outside of modal area then Bootstrap modal will close.
To prevent this, you need to change default value of backdrop and keyboard configuration using HTML or jQuery.
- In HTML, you need to set data-backdrop="static" and data-keyboard="false". For example,
<a href="javascript:void(0);" data-target="#modalid" data-toggle="modal" data-backdrop="static" data-keyboard="false">Click to open popup</a>
OR
- In jQuery, you need to set backdrop: 'static' and keyboard: false attributes. For example,
$('#modalid').modal({
backdrop: 'static',
keyboard: false
});
Complete code is as follow:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Prevent Bootstrap modal from Closing by ESC key and Outside clicking</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript">
jQuery(document).ready(function () {
$('#lnkOpenPopup').click(function () {
$('#modalid').modal({
backdrop: 'static',
keyboard: false
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<a href="javascript:void(0);" class="btn btn-primary" data-target="#modalid" data-toggle="modal" data-backdrop="static" data-keyboard="false">Show Demo Using HTML</a>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<a id="lnkOpenPopup" href="javascript:void(0);" class="btn btn-primary">Show Demo Using jQuery</a>
</div>
</div>
</div>
<!-- Modal HTML -->
<div id="modalid" class="modal fade" tabindex="1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
Prevent Bootstrap modal from Closing by ESC key and Outside clicking
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Here, I will explain prevention of Bootstrap modal's closing by pressing ESC key of keyboard and by clicking outside area of modal.
Description:
By default configuration of Bootstrap modal is, it will close or disappear by clicking outside area of modal or by pressing ESC key of keyboard (if modal have focus).
Sometimes it is mandatory to override this functionality and prevent default closing of modal. For example, if your site contains multi-step registration form in Bootstrap modal and user have filled details of entire form and by mistake press ESC key of keyboard or click outside of modal area then Bootstrap modal will close.
To prevent this, you need to change default value of backdrop and keyboard configuration using HTML or jQuery.
- In HTML, you need to set data-backdrop="static" and data-keyboard="false". For example,
<a href="javascript:void(0);" data-target="#modalid" data-toggle="modal" data-backdrop="static" data-keyboard="false">Click to open popup</a>
OR
- In jQuery, you need to set backdrop: 'static' and keyboard: false attributes. For example,
$('#modalid').modal({
backdrop: 'static',
keyboard: false
});
Complete code is as follow:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Prevent Bootstrap modal from Closing by ESC key and Outside clicking</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript">
jQuery(document).ready(function () {
$('#lnkOpenPopup').click(function () {
$('#modalid').modal({
backdrop: 'static',
keyboard: false
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<a href="javascript:void(0);" class="btn btn-primary" data-target="#modalid" data-toggle="modal" data-backdrop="static" data-keyboard="false">Show Demo Using HTML</a>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<a id="lnkOpenPopup" href="javascript:void(0);" class="btn btn-primary">Show Demo Using jQuery</a>
</div>
</div>
</div>
<!-- Modal HTML -->
<div id="modalid" class="modal fade" tabindex="1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
Prevent Bootstrap modal from Closing by ESC key and Outside clicking
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
No comments:
Post a Comment