通过点击模式iframe来关闭对话框？

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

this.modal is not a single element, instead it is a DOM object which is why you can not bind anything on it. Try binding $('.modal-screen', this.modal) instead.

Answer 2

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