Jquery 通过单击主框外部，使用css退出模式

我只使用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>

模态盒
展示客户
{{client.name}

---

谢谢：）

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

href

：

HTML:

---

您可以添加另一个作为层的

元素，当您单击它时，它将隐藏模式：


//代码在这里
角度模块（“演示”，[]）；
有棱角的
.模块（“演示”）
.controller（“demoCtrl”、[“$scope”、函数（$scope）{
$scope.client={
姓名：“约翰·多伊”，
国家：错
};
$scope.changeState=函数（）{
$scope.client.state=！$scope.client.state；
}
}]);
/*样式在这里*/
莫达尔迪亚洛先生{
位置：固定；
排名：0；
右：0；
底部：0；
左：0；
背景：rgba（0,0,0,0.8）；
z指数：99；
不透明度：0；
-webkit过渡：不透明度400ms缓进；
-moz过渡：不透明度400ms缓进；
过渡：不透明度400ms缓进；
指针事件：无；
}
.modalDialog：目标{
不透明度：1；
指针事件：自动；
}
/*新元素的CSS*/
.结束{
位置：绝对位置；
排名：0；
右：0；
左：0；
底部：0；
}
/*   */
.modalDialog.content{
宽度：400px；
位置：相对位置；
利润率：10%自动；
填充：15px；
边界半径：5px；
背景色：白色；
}

模态盒
展示客户
{{client.name}
为什么要使用
ng再次单击
？@SergeK。然后触发什么呢？：）更改
=>
你用几秒钟的时间就打败了我，因为你的想法是一样的：）但我花了很多时间才把它放到这里：p@TemaniAfif我也花了一点时间，因为我先在plunker上测试了一下。。下次你会得到它；）祝你好运！不，这不是一场战斗：）只是开玩笑，因为你得到的和我的完全一样；）非常感谢。它工作得很好。以前有人回答过，所以我不得不接受他的回答。不过我比你投了更高的票；）
  <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>

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