Question

I am creating a modal dialog box. First I append an iframe to the body tag to act as my overlay.

<div class="modal-screen">
  <iframe src="javascript:false;"></iframe>
</div>

Then I append my dialog box to the body.

<div class="dialog">
  <!-- various dialog related elements
</div>

Now I would like to close the dialog when the user clicks the overlay. The problem is that I can’t seem to bind to any events related to the overlay.

To summarize my JS, basically my dialog view has an initialize method where the overlay is prepared:

initialize: function() {
  this.modal = $('<div class="modal-screen"><iframe src="javascript:false;"></iframe></div>')

  this.modal.on('click', function(e) {
    // this event never seems to fire
    console.log("hello");
  }
}

Then I render into the page when I need it. When I click the overlay, I never see hello..

render: function() {
  $('body').append(this.modal);
  // append other dialog content
  this
}

Answer 1

There is no reason to be using an iframe here. Simply construct an overlay div, then remove it when it is clicked.