Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Disable (Prevent) Closing Bootstrap Modal When Click Outside Example

Jun 6, 2016
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.


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">&times;</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 RSS subscribe by email Subscribe by Email

2 comments :

pragyesh thakur said...
This comment has been removed by the author.
pragyesh thakur said...

lots of thanks. your post is awesome, it save my lot of time.

Give your Valuable Comments

Other Related Posts

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.