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);
});

Possible duplicate of [jQuery event to trigger action when a div is made visible](http://stackoverflow.com/questions/1225102/jquery-event-to-trigger-action-when-a-div-is-made-visible) — mastazi, Aug 02 '16 at 04:05

score 1 · Answer 1 · answered Aug 02 '16 at 04:04

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">&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>

source

Pop-up Event Handler

1 Answers1