How to disable click outside modal to close modal in bootstrap
In bootstrap when you want to use Modal to show any message then it is very important but one more important thing is that when click out side of the modal then modal will be disable. If you do not want to use disable back click then use following code.
Bootstrap is a very powerful, extensible, and feature-packed fronted toolkit which is used to build fast and responsive websites.
Bootstrap provides powerful Modal component which is used to create models within the web pages or website. In this article, we will learn how we can disable the click outside of the bootstrap modal area to close the modal functionality.
Bootstrap provides the static backdrop option to set the backdrop static , it does not close the modal even if the user clicks outside the modal area.
Syntax:
To set the backdrop to static, in the modal set element “data-bs-backdrop” attribute to “static“.
<div class='modal' data-bs-backdrop='static' ...>
...
</div>Example 1
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prevent Back click in bootstrap Modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.launch-modal').click(function(){
$('#myModal').modal({
backdrop: 'static'
});
});
});
</script>
</head>
<body>
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
<input type="button" class="btn btn-lg btn-primary launch-modal" value="Click Modal">
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Welcome to Agyanadda</h4>
</div>
<div class="modal-body">
<p>Clicke outside of the modal to check modal is disable or not</p>
</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>
</div>
</body>
</html>
Latest Post
Upload Image in MySQL database using Node js and React js
How to add new column to existing table without losing data in Laravel
Laravel Eloquent display query log in php
What is traits in PHP with example
How to disable click outside modal to close modal in bootstrap
Auto refresh code in HTML using meta tags
How to Optimize the Speed & Performance of a Laravel Website