jquery - 通过单击主框外部使用 css 退出模态

Question

我只使用 css 创建了这个模式弹出窗口，但是我只能在单击“X”时离开它。我想添加当用户在主框外单击时离开模式的选项，即单击灰色区域。

关于如何完成它有什么建议吗？

有必要用JQuery吗？ 到目前为止，代码非常简单，这就是我试图避免它的原因。

  <div ng-controller="demoCtrl">
    <a href="#openModal">Open Modal</a>
    <div id="openModal" class="modalDialog">
      <div class="content">
        <a href="#close">X</a>
        <h1>Modal Box</h1>
        <button ng-click="changeState()">Show Client</button>
        <div ng-if="client.state">{{client.name}}</div>
      </div>
    </div>
  </div>

Plunker to check the whole thing

谢谢你:)

Answer 1

您可以在包含所有窗口大小的内容后面添加一个链接，并设置与关闭按钮相同的 href:

HTML:

  <div ng-controller="demoCtrl">
    <a href="#openModal">Open Modal</a>
    <div id="openModal" class="modalDialog">
      <a class="fullSizeBlock" href="#close">&nbsp;</a>
      <div class="content">
          <a href="#close">X</a>
          <h1>Modal Box</h1>
          <button ng-click="changeState()">Show Client</button>
        <div ng-if="client.state">{{client.name}}</div>
      </div>
    </div>
  </div>

添加了 CSS(光标不是必需的，您可以保留默认链接指针):

.fullSizeBlock{
  cursor: initial;
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}