Introduction:
Here I will explain how to prevent / stop / disable bootstrap modal window popup close on click outside of modal example or prevent bootstrap modal from closing when click outside or Prevent / Disable closing bootstrap modal with Esc key or mouse click on outside with example or stop closing bootstrap modal popup when click outside.
Description:
In previous articles I explained Bootstrap accordion menu with plus / minus icons example, jQuery Bootstrap autocomplete textbox from database example, Bootstrap dropdownlist with checkboxes in jQuery, jQuery show html content in popup window, jQuery add fade in effect to content example, jQuery autocomplete textbox with multiple words in asp.net and many articles relating to autocomplete, bootstrap, css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to prevent or stop closing bootstrap modal popup when click outside of model with example.
In previous articles I explained Bootstrap accordion menu with plus / minus icons example, jQuery Bootstrap autocomplete textbox from database example, Bootstrap dropdownlist with checkboxes in jQuery, jQuery show html content in popup window, jQuery add fade in effect to content example, jQuery autocomplete textbox with multiple words in asp.net and many articles relating to autocomplete, bootstrap, css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to prevent or stop closing bootstrap modal popup when click outside of model with example.
To
prevent closing bootstrap modal when click outside of modal window we need add properties
data-backdrop="static" and data-keyboard="false" to button which we are using to show modal window like
as shown following.
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
data-target="#myModal"
data-backdrop="static"
data-keyboard="false">
Show Modal
</button>
|
If
you want complete code to stop / prevent closing bootstrap modal when click outside of model then open your application
and write the code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prevent closing bootstrap modal window on click outside</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
></script>
</head>
<body>
<form id="form1">
<!-- Button trigger modal
-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
data-target="#myModal"
data-backdrop="static"
data-keyboard="false">
Show Modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Prevent Model Close</h4>
</div>
<div class="modal-body">
Welcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.com
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
|
Now we will run and see the output that would be like as
shown below
Demo
Check following demo to prevent closing bootstrap modal when we click outside of model
or press Esc button.
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
3 comments :
lots of thanks. your post is awesome, it save my lot of time.
great post...thanks...appreciate your effort.
Note: Only a member of this blog may post a comment.