How to Prevent Bootstrap Modal from Closing when Clicking Outside

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 disabe. If you do not want to use disable back click then use following code. 

<!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>

<style type="text/css">

    .bs-example{

        margin: 20px;

    }

</style>a

</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">&times;</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>

prevent-bootstrap-modal.JPG

View Another Modules