How to prevent closing Bootstrap Modal when click outside div
In this article, we will describe how to prevent
close div when we click outside .many times we want to protect to click outside
close div.
Source Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="bootstrapmodel.aspx.cs" Inherits="bootstrapmodel"
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></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" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<button type="button" class="btn
btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">
Show Modal
</button>
<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">Bootstrap</h4>
</div>
<div class="modal-body">
<h3>Bootstrap
is a sleek, intuitive, and powerful, mobile first front-end framework for
faster and easier web development. It uses HTML, CSS and Javascript.</h3>
</div>
<div class="modal-footer">
<asp:Button runat="server" ID="btncancel" class="btn
btn-default" data-dismiss="modal" Text="Cancel" />
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Out-Put:-
How to prevent closing Bootstrap Modal when click outside div
Reviewed by NEERAJ SRIVASTAVA
on
4:48:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
4:48:00 PM
Rating:
No comments: