仅使用CSS的模态窗口功能

Question

我想通过仅使用css点击按钮来显示模态窗口。

到目前为止，一切都有效，但期待一件事。当我点击模态窗口外的任何地方时，我需要关闭现在没有发生的模态框。我们有什么方法可以只使用CSS吗？请帮忙

＆＃13;

＆＃13;

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  /*	-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;*/
  pointer-events: none;
}

.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}

.modalDialog>div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
}

.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}

.close:hover {
  background: #00d9ff;
}

＆＃13;

<div class="cta-module bottom-divider">
  <h2>Looking for Health EFPPOS Solutions?</h2>
  <div class="cta-wrapper">
    <p>Our mobile EFTPOS facilities are convenient, portable and secure</p>
    <p><a class="button_primary" href="#openModal">Apply</a></p>
    <p><a class="button_secondary" href="#openModal">Learn more</a></p>
  </div>
</div>
<div id="openModal" class="modalDialog">
  <div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Modal Box</h2>
    <p>This is a sample modal box that can be created</p>
    <p>Whether it's a new or second-hand car, a personal loan can help you pay for your car if you don't have the funds up front.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;