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

Question

我正在创建一个模式对话框。 首先，我将一个iframe附加到body标签上，作为我的叠加层。

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

然后，将对话框附加到body 。

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

现在，我想在用户单击叠加层时关闭对话框。 问题是我似乎无法绑定到任何与叠加层相关的事件。

总结一下我的JS，基本上我的对话框视图有一个initialize方法，用于准备叠加层：

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

然后在需要时渲染到页面中。 当我单击叠加层时，我永远不会看到hello ..

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

Answer 1

this.modal不是单个元素，而是一个DOM对象，这就是为什么您不能在其上绑定任何内容的原因。 尝试改为绑定$（'。modal-screen'，this.modal）。

Answer 2

这里没有理由使用iframe。 只需构建一个overlay div ，然后单击它即可将其删除。