關閉模態使用CSS只

我只需要通過使用CSS這樣收我的模式：http://jsfiddle.net/raving/1mhsynmw/關閉模態使用CSS只

但是，我無法得到它的工作。下面是我的模態。

function alert(msg) { 
 
\t 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 { 
 
\t cursor:default; 
 
} 
 
.modal-container { 
 
\t padding: 10px; 
 
} 
 
.modal p a { 
 
\t color:#555; 
 
} 
 
.modal-footer a { 
 
\t display:block; 
 
\t border:1px solid #eee; 
 
\t width:9.5%; 
 
\t padding:3px; 
 
\t background:#fff; 
 
\t text-decoration:none; 
 
\t float:right; 
 
} 
 
.modal-footer { 
 
    background: #fafafa; 
 
    border-top: 1px solid #eee; 
 
    margin-bottom: 0px; 
 
\t margin-top:0px; 
 
\t padding:8px; 
 
\t height:25px; 
 
} 
 
.modal h3 { 
 
\t margin:0px; 
 
\t white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    max-width: 175px; 
 
} 
 
.modal-last { 
 
\t 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來關閉這種模式？

來源

2016-02-05 Mia

什麼使模態密切和在什麼時候？ – colecmc

@colecmc模塊在點擊確定時應該關閉。 – Mia

你的所有樣式都不使用'：target'僞選擇器，而你的模態沒有任何'id =「my_id」'屬性，它將被用在' Aprillion

如果您不想在使用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

來源

2016-02-05 17:58:54

謝謝你的回答，因爲某些原因，當我單擊事件時，即使它們在同一個文件中也沒有任何反應。 – Mia

@larry Lane，'.modal'是一個類選擇器，不是ID –

@HermanNz注意到並在我的代碼中將其更改爲'getElementByClassName'，這不是問題。 – Mia

根據您的js代碼，您注射模態元素到DOM document.getElementById("alert").innerHTML = 'modal stuff'，如果你想擺脫它，最簡單的方法，用一個空字符串是這樣的：document.getElementById("alert").innerHTML = ''

CSS的方法是像display: none。

正確的方法你應該通過調用javascript關閉函數來關閉它，它會在本身之後刪除模式並清理（舊的代碼不再存在）。此方法取決於模態的類型以及您想要實現的內容。

來源

2016-02-05 17:57:37 Tatarin

我不相信只有通過單擊確定按鈕才能關閉/隱藏模式的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）

來源

2016-02-05 18:14:38 slinhart

回答

相關問題