单击外部时关闭模式（仅限CSS + HTML） [英] Close Modal Upon Click Outside (CSS + HTML Only)
本文介绍了单击外部时关闭模式（仅限CSS + HTML）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问候并提前致谢
总结 类似的帖子/问题 点击远离它关闭模式弹出窗口 （Script based fix） 仅使用CSS关闭模态 （基于脚本的修复） 禁用外部点击关闭模式 （基于脚本的修复） 单击外部或ESC时关闭模式窗口 （基于脚本的修复） 所需效果的示例 - 可能的修正 通过点击框外的方式关闭模式（请阅读底部的最后一个答案）
$ b
通过使用脚本
问题
当用户在外部点击时，如何使用 CSS 创建模式关闭仅限code>和 HTML ？
$ b
我的 CSS 和 HTML 下面的代码片断（不完全抵抗 - 全屏打开）
body {background：＃111; text-align：center;} a {text-decoration：none;}。content {text-align：justify; text-justify：trim;最大宽度：60％; margin：auto} .mbutton {border：1px solid rgba（115，117，117，0.6）; padding：8px 60px 8px 60px;}。modal {position：fixed; top：0;正确：0;底部：0;左：0;不透明度：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;最大宽度：15％;}。wrap，.modal {display：flex} .mbutton：hover，.close，.mitem {color：＃111} .content，.mbutton，.close：hover，.mitem：hover {颜色：＃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 =＃Mclass =mbutton>菜单< / a> < div id =Mclass =modal> < DIV> < a href =＃title =关闭菜单class =close>&＃9747;< / a> < a href =http://google.comclass =mitem>主页< / a> < a href =http://yahoo.comclass =mitem>照片< / a> < a href =http://bing.comclass =mitem>详情< / a> < a href =https://stackoverflow.com/class =mitem>联络人< / 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 ilo 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。尽管如此，我们仍然坚信，真正的努力不会让人感到不安。 < p> sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium，totam rem aperiam，eaque ipsa quae ab ilo 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>如果您有任何疑问，请与我们联系，我们会尽快与您联系。< / p>您可以在任何时间，任何地点，任何地点，任何地点，任何地点，任何地点，任何时间，任何地点， < / div>< / body>
解决方案 在目标中制作另一个
a 父母和少于 z-index 比模型内容 div 应该是 position：relative
更改
/ p>
< a href =＃title =Close Menuclass =bodyclose>< / a>
in css： -
.bodyclose {
top：0;
right：0;
bottom：0;
剩下：0;
opacity：0;
display：none;
z-index：1;
位置：固定;
}
.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;
职位：亲属;
}
body {background：＃111; text-align：center;} a {text-decoration：none;}。content {text-align：justify; text-justify：trim;最大宽度：60％; margin：auto} .mbutton {border：1px solid rgba（115，117，117，0.6）; padding：8px 60px 8px 60px;}。modal {position：fixed; top：0;正确：0;底部：0;左：0;不透明度：0; pointer-events：none;}。bodyclose {top：0;正确：0;底部：0;左：0;不透明度：0;显示：无;的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）;宽度：12em;的z-index：2; position：relative;}。close {margin：0 auto 0.7em auto;}。最大宽度：15％;}。wrap，.modal {display：flex} .mbutton：hover，.close，.mitem {color：＃111} .content，.mbutton，.close：hover，.mitem：hover {颜色：＃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 =＃Mclass =mbutton>菜单< / a> < div id =Mclass =modal> < DIV> < a href =＃title =关闭菜单class =close>&＃9747;< / a> < a href =http://google.comclass =mitem>主页< / a> < a href =http://yahoo.comclass =mitem>照片< / a> < a href =http://bing.comclass =mitem>详情< / a> < a href =http://stackoverflow.com/class =mitem>联系人< / a> < / DIV> < a href =＃title =关闭菜单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 ilo 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。尽管如此，我们仍然坚信，真正的努力不会让人感到不安。 < p> sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium，totam rem aperiam，eaque ipsa quae ab ilo 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>如果您有任何疑问，请与我们联系，我们会尽快与您联系。< / p>您可以在任何时间，任何地点，任何地点，任何地点，任何地点，任何地点，任何时间，任何地点， < / body>
Greetings and thank you in advance
Summery
- Modal
- Works like a charm (close button works fine too)
- Need it to close when user clicks outside
- No JS / jQuery (CSS + HTML only)
Similar posts / issues
Closing Modal Popup by Clicking Away from It (Script based fix)
Close Modal using CSS only (Script based fix)
Disable Close Modal on Outside Click (Script based fix)
HTML5 CSS3 modal window, close when click outside (Script based fix)
Close a div by clicking outside (Script based fix)
Close modal window when clicking outside or ESC (Script based fix)
Example of the Effect Desired - achived by using script
Possible fixes
Close modal by clicking outside the box (please read the last answer at the bottom)
CSS/HTML Modal- Using the Escape key/Click outside to close (please note the note attached to the first answer)
Note, that closing modal is technically possible with CSS/HTML only...
Question
How can I make a modal close when the user clicks outside by using CSS and HTML only?
My CSSand HTMLare in the snippet below (Not fully resposive - open in fullscreen)
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">☓</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>
解决方案 Make Another a inside your target with width and height match with position:fixed; the parent and having less z-index than the model content div which should be position:relative
Change
in html:-
<a href="#" title="Close Menu" class="bodyclose"></a>
in 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">☓</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>
这篇关于单击外部时关闭模式（仅限CSS + HTML）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
