弹出事件处理程序

Question

在不使用setTimeout()情况下，有没有特定方法可以执行JS脚本直到出现弹出窗口元素？ 以下是弹出窗口的打开步骤。

• 用户位于abc.com上并单击一个按钮。
• 出现弹出元素。
• 用户单击弹出窗口中的另一个按钮。 事件处理程序应特定于此点击。

下面提供了我当前的实现。

$(document).on('click',function() {
    window.setTimeout(function() {
        if ($('#pop-up').css("visibility") === "visible") {
            $('.modal-footer button').click(function() {
                // Do something;
                }
            });
        }
    },1500);
});

Answer 1

如果您正在显示引导程序模态（如我可以从您在代码中使用的boostrap类中推断出的那样） ，则可以使用shown.bs.modal

在这里查看官方文档

显示.bs.modal

当使模式对用户可见时将触发此事件（将等待CSS转换完成）​​。 如果是由单击引起的，则clicked元素可用作事件的relatedTarget属性。

例

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Events - shown.bs.modal</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>The <strong>shown.bs.modal</strong> event occurs when the modal is fully shown.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <script> $(document).ready(function(){ $("#myBtn").click(function(){ $("#myModal").modal("show"); }); $("#myModal").on('shown.bs.modal', function () { alert('The modal is fully shown.'); }); }); </script> </body> </html> 

资源