Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Disable Closing of Bootstrap Modal on Click of Dark Area</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(){ $('#myModal').modal({ backdrop: 'static' }); }); }); </script> <style> .bs-example{ margin: 20px; } </style> </head> <body> <div class="bs-example"> <!-- Button HTML (to Trigger Modal) --> <input type="button" class="btn btn-lg btn-primary launch-modal" value="Launch Demo Modal"> <!-- Modal HTML --> <div id="myModal" 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>Do you want to save changes you made to document before closing?</p> <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p> <p class="text-info"><small><strong>Note:</strong> Press Tab key on the keyboard to enter inside the modal window after that press the Esc key. By default keyboard option is true that means modal hide on the press of escape key.</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>
