切换布局
显示结果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap4 防止点击退出键关闭模态框 - 迹忆客(jiyik.com)</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <style> .bs-example{ margin: 20px; } </style> <script> $(document).ready(function() { // Passing option $("#myModal").modal({ keyboard: false }); // Show modal $("#myBtn").click(function() { $("#myModal").modal("show"); }); }); </script> </head> <body> <div class="bs-example"> <!-- Button HTML (to Trigger Modal) --> <button type="button" id="myBtn" class="btn btn-lg btn-primary">Launch Demo Modal</button> <!-- Modal HTML --> <div id="myModal" class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">确认框</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <p>Do you want to save changes to this document before closing?</p> <p class="text-secondary"><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-bs-dismiss="modal">取消</button> <button type="button" class="btn btn-primary">保存修改</button> </div> </div> </div> </div> </div> </body> </html>
