Pop-up Event Handler
Question
Is there any specific way to execute a JS script until a pop-up element has appeared, without using setTimeout() ? Following are the steps for pop-up opening.
- User is on abc.com and clicks a button.
- Pop-up element appears.
- User clicks on another button in pop-up. The event handler should be specific to this click.
My current implementation is provided below.
$(document).on('click',function() {
window.setTimeout(function() {
if ($('#pop-up').css("visibility") === "visible") {
$('.modal-footer button').click(function() {
// Do something;
}
});
}
},1500);
});
1 answers
solution1
0 2016-08-02 04:04:48
If you're showing bootstrap modal (as i can infer from the boostrap classes that you've used in your code) , then you can use shown.bs.modal
look at the official documentation here
shown.bs.modal
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
example
<!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">×</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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.