当将要显示模态时,会引发Bootstrap中的show.bs.modal事件。在这里,我添加了一个脚本来生成警报-
<script> $(document).ready(function(){ $("#button1").click(function(){ $("#newModal").modal("show"); }); $("#newModal").on('show.bs.modal', function () { alert('The modal will be displayed now!'); }); }); </script>
在上方,单击按钮即可生成模态。之后,我使用show.bs.modal事件在模态即将可见时生成警报。
以下是一个示例,演示如何在将要显示模式时在Bootstrap中触发show.bs.modal事件-
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Team</h2> <p>The following is the result of the selections:</p> <button type="button" class="btn btn-default btn-lg" id="button1">Result</button> <div class="modal fade" id="newModal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Selected Players</h4> </div> <div class="modal-body"> <p>Tom and Jack selected in the team.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <script> $(document).ready(function(){ $("#button1").click(function(){ $("#newModal").modal("show"); }); $("#newModal").on('show.bs.modal', function () { alert('The modal will be displayed now!'); }); }); </script> </body> </html>