个人中心
gpt4 book ai didi

html - 单击外部关闭模式(仅限 CSS + HTML)

转载 作者：可可西里 更新时间：2023-11-01 13:24:31 26 4
gpt4 key购买 nike

提前致谢

总结

  • 模态
  • 工作很有魅力(关闭按钮也很好用)
  • 需要在用户点击外部时关闭它
  • 无 JS/jQuery (仅限 CSS + HTML)

类似的帖子/问题

所需效果示例 - 使用脚本实现

可能的修复

Note, that closing modal is technically possible with CSS/HTML only...

问题

当用户单击外部 时，我如何仅使用 CSS 和 HTML 进行模态关闭？

我的 CSS 和 HTML 在下面的代码片段中(不完全响应 - 全屏打开)

body {
  background: #111;
  text-align: center;
}
a {
  text-decoration: none;
}
.content {
  text-align: justify;
  text-justify: trim;
  max-width: 60%;
  margin: auto
}
.mbutton {
  border: 1px solid rgba(115, 117, 117, 0.6);
  padding: 8px 60px 8px 60px;
}
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}
.modal:target {
  opacity: 1;
  pointer-events: auto;
}
.modal > div {
  background: rgba(115, 117, 117, 0.6);
  width: 12em;
}
.close {
  margin: 0 auto 0.7em auto;
  max-width: 15%;
}
.wrap,
.modal {
  display: flex
}
.mbutton:hover,
.close,
.mitem {
  color: #111
}
.content,
.mbutton,
.close:hover,
.mitem:hover {
  color: #999
}
.mitem,
.close {
  display: block
}
.wrap,
.modal {
  align-items: center;
  justify-content: center
}
.mbutton:hover,
.mitem {
  background: rgba(150, 150, 150, 0.9);
}
.mitem,
.modal > div {
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.2)
}
.mitem:hover,
.modal {
  background: rgba(0, 0, 0, 0.8)
}
.mbutton,
.modal > div {
  margin: 5% auto;
}
<body>
  <div class="wrap">
    <a href="#M" class="mbutton">Menu</a>
    <div id="M" class="modal">
      <div>
        <a href="#" title="Close Menu" class="close">&#9747;</a>
        <a href="http://google.com" class="mitem">Home</a>
        <a href="http://yahoo.com" class="mitem">Photos</a>
        <a href="http://bing.com" class="mitem">Details</a>
        <a href="https://stackoverflow.com/" class="mitem">Contact</a>
      </div>
    </div>
  </div>
  <div class="content">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit,
      <br>
      <br>sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
      aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
      <br>
      <br>>qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum
      quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta.</p>
  </div>
</body>

最佳答案

在您的目标内创建另一个 a，其宽度和高度与 position:fixed; 父级匹配，并且 z-index 小于模型内容 div 应该是 position:relative

改变

在 html 中:-

        <a href="#" title="Close Menu" class="bodyclose"></a>

在 CSS 中:-

.bodyclose {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  display:none;
  z-index:1;
  position:fixed;
}
.modal:target {
  opacity: 1;
  pointer-events: auto;
}
.modal:target > .bodyclose {
  display:block;
}
.modal > div {
  background: rgba(115, 117, 117, 0.6);
  width: 12em;
  z-index:2;
  position:relative;
}

body {
  background: #111;
  text-align: center;
}
a {
  text-decoration: none;
}
.content {
  text-align: justify;
  text-justify: trim;
  max-width: 60%;
  margin: auto
}
.mbutton {
  border: 1px solid rgba(115, 117, 117, 0.6);
  padding: 8px 60px 8px 60px;
}
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}
.bodyclose {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  display:none;
  z-index:1;
  position:fixed;
}
.modal:target {
  opacity: 1;
  pointer-events: auto;
}
.modal:target > .bodyclose {
  display:block;
}
.modal > div {
  background: rgba(115, 117, 117, 0.6);
  width: 12em;
  z-index:2;
  position:relative;
}
.close {
  margin: 0 auto 0.7em auto;
  max-width: 15%;
}
.wrap,
.modal {
  display: flex
}
.mbutton:hover,
.close,
.mitem {
  color: #111
}
.content,
.mbutton,
.close:hover,
.mitem:hover {
  color: #999
}
.mitem,
.close {
  display: block
}
.wrap,
.modal {
  align-items: center;
  justify-content: center
}
.mbutton:hover,
.mitem {
  background: rgba(150, 150, 150, 0.9);
}
.mitem,
.modal > div {
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.2)
}
.mitem:hover,
.modal {
  background: rgba(0, 0, 0, 0.8)
}
.mbutton,
.modal > div {
  margin: 5% auto;
}
<body>
  <div class="wrap">
    <a href="#M" class="mbutton">Menu</a>
    <div id="M" class="modal">
      <div>
        <a href="#" title="Close Menu" class="close">&#9747;</a>
        <a href="http://google.com" class="mitem">Home</a>
        <a href="http://yahoo.com" class="mitem">Photos</a>
        <a href="http://bing.com" class="mitem">Details</a>
        <a href="http://stackoverflow.com/" class="mitem">Contact</a>
      </div>
        <a href="#" title="Close Menu" class="bodyclose"></a>
    </div>
  </div>
  <div class="content">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit,
      <br>
      <br>sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
      aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
      <br>
      <br>>qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum
      quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta.</p>
  </div>
</body>

关于html - 单击外部关闭模式(仅限 CSS + HTML)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40950099/

26 4 0
文章推荐： html - (css) 图像上的对 Angular 线文本 (svg)
文章推荐： python - 操作系统重启、关机、休眠、 sleep 、唤醒(Windows Python)
文章推荐： PHPMailer $mail->From headers 不适用于 gmail
文章推荐： c# - 如何在 WinForms 中强制用户使用管理员帐户
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com