仅使用 CSS 关闭模式

Close Modal using CSS only

本文关键字：模式 CSS      更新时间：2023-09-26

我需要通过使用像这样的 css 来关闭我的模态：http://jsfiddle.net/raving/1mhsynmw/

但是，我无法让它工作。我的模态在下面。

function alert(msg) {
	document.getElementById("alert").innerHTML = '<div class="modal-overlay"><div class="modal"><div class="modal-container"><h3>' + msg + '</h3><p>' + msg + '</p></div><p class="modal-footer"><a href="javascript:" id="ok">OK</a></p></div>';
}
alert("This is some text to show you this modal. This is some text to show you this modal. This is some text to show you this modal. This is some text to show you this modal.");
body {
  font-family:arial;
  font-size:11px;
}
.modal {
     position: fixed;
     top: 20px;
     margin-left: auto;
     margin-right: auto;
     left: 0;
     right: 0;
     width: 200px;
     box-shadow: 0 4px 6px 1px rgba(50, 50, 50, 0.14);
     background: #fff;
}
.modal p {
	 cursor:default;
}
.modal-container {
	 padding: 10px;
}
.modal p a {
	 color:#555;
}
.modal-footer a {
	 display:block;
	 border:1px solid #eee;
	 width:9.5%;
	 padding:3px;
	 background:#fff;
	 text-decoration:none;
	 float:right;
}
.modal-footer {
     background: #fafafa;
     border-top: 1px solid #eee;
     margin-bottom: 0px;
	 margin-top:0px;
	 padding:8px;
	 height:25px;
}
.modal h3 {
	 margin:0px;
	 white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 175px;
}
.modal-last {
	 padding-bottom:0px;
}
.modal-overlay:before {
     content: '';
     position: fixed;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
}
<div id="alert"></div>
<h3>Content..</h3>
<p>Just to show it's a modal</p>

问：有没有办法在不使用Javascript的情况下关闭模式？这是不可能的，我如何使用 Javascript 关闭这个模态？

如果你不想在点击 ok 按钮时使用 JQuery 关闭模式，你可以用纯 JavaScript 做一些类似于以下代码的事情。您必须为选择器分配一个索引才能使其正常工作。

    //begin click event
    document.getElementById("ok").addEventListener("click",function(event){

    /* Hide the element with a class name of modal.
       note:If there is more than one element with the class name
       modal then this code will only select the first one in the
       collection of elements 
    */
    document.getElementsByClassName("modal")[0].style.display = "none";

       });//end click event
我不

相信有 css 唯一的方法可以在单击"确定"按钮时关闭/隐藏模态。但是，使用普通的Javascript应该很容易关闭。根据你是要隐藏模态（但将其保留在 DOM 中），还是实际删除模态元素，您可以像这样实现它。

 // To hide, run this inside a click callback
 document.getElementById('modal').classList.push('hide');
 .hide {
   display: hidden;
 }

 // And to remove
 var modal = document.getElementById('modal');
 modal.parentNode.removeChild(modal);

此外，您还必须向模态添加一个 #modal id，而不仅仅是一个类（除非您要使用document.getElementsByClassName）

基于你的 js 代码，你正在将模态元素注入到 dom document.getElementById("alert").innerHTML = 'modal stuff'如果你想摆脱它，最简单的方法，使用这样的空字符串： document.getElementById("alert").innerHTML = ''

CSS 方式类似于 display: none .

你应该关闭它的正确方法，通过调用javascript close函数，这将删除模态并在自身之后清理（所以旧代码不再存在）。此方法取决于模态的类型以及要实现的目标。

我个人会使用javascript，但为了完整起见，这里有一种方法只能通过使用复选框和:checked伪类来使用CSS。

在这个例子中，我使用的是has选择器，它目前似乎没有很好的浏览器支持。但我相信应该有其他方法来解决它（使用包装器 DIV、兄弟选择器等）。

.modal {
    position: absolute;
    background: grey;
    width: 50%;
    height: 50%;
}
.modal:has(.btn-close:checked) {
    display: none;
}
.btn-close {
    -webkit-appearance: none;
    appearance: none;
}

<div class="modal">
    <input id="close-button" type="checkbox" class="btn-close">
    <label for="close-button">X</label>
    <p>My modal content</p>
</div>
相关文章：