我需要像這樣使用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>

如果您不想在單擊ok按鈕時使用JQuery關閉模式，您可以使用普通的Java腳本執行類似下面的代碼。您必須為選擇器分配一個索引才能使其工作。

//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才能在點擊OK按鈕時關閉/隱藏模態。但是，用普通的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添加一個#modal id，而不僅僅是一個類(除非您想使用document . getelementsbyclassname)

基于您的js代碼，您正在將模態元素注入DOM document . getelementbyid(" alert ")。innerHTML = 'modal stuff '如果你想去掉它，最簡單的方法，就是使用這樣的空字符串:document.getElementById("alert ")。innerHTML = ' '

CSS方式類似于display: none。

正確的方法應該是通過調用javascript close函數來關閉它，這個函數會移除modal并在關閉后進行清理(這樣舊代碼就不再存在了)。這種方法取決于模態的類型和你想要達到的目的。

我個人傾向于使用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>