how to prevent bootstrap modal from closing when clicking outside?

Today, We want to share with you bootstrap modal prevent close on click outside.In this post we will show you close bootstrap modal popup when click outside, hear for prevent popup from closing when you click outside popup we will give you demo and example for implement.In this post, we will learn about PHP Ajax Display Dynamic MySQL Data In Bootstrap Modal with an example.

How to prevent Bootstrap modal from closing when clicking outside?

data-backdrop=”static” to click out and data-keyboard=”false” to Esc in your div modal:

Read Also:  Toggle Switches Laravel, Ajax and jQuery example

HTML Code

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">

js code

$('#liveEditUser').modal({
    backdrop: 'static',
    keyboard: false
})

Full Example

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Disable Closing of Bootstrap Modal on Click of Dark Area - www.pakainfo.com</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
	$('.launch-modal').click(function(){
		$('#liveEditUser').modal({
			backdrop: 'static'
		});
	}); 
});
</script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">

    <input type="button" class="btn btn-lg btn-primary launch-modal" value="Launch Demo Modal">
    

    <div id="liveEditUser" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirmation</h5>
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body">
                    <p>TamilRockers 2021: Tamilrockers website Movies</p>
                    <p class="text-warning"><small>Tamil rockers website is a platform where users can get all the latest and new Telugu, Malayalam, Punjabi, Bollywood and Hollywood movies in HD quality.</small></p>
                    <p class="text-info"><small><strong>Note:</strong></small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

I hope you get an idea about bootstrap modal not closing on click.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.