在模態中使用純HTML和CSS

我發現這種模式http://codepen.io/imprakash/pen/GgNMXO純html和css沒有js。這一切都很棒，但是我怎樣才能在不使用按鈕或鏈接的情況下觸發它？一旦網站加載，我希望它彈出來歡迎訪問者。在模態中使用純HTML和CSS

<div id="popup1" class="overlay"> 
<div class="popup"> 
    <h2>Here i am</h2> 
    <a class="close" href="#">&times;</a> 
    <div class="content"> 
     Thank to pop me out of that button, but now i'm done so you can close this window. 
    </div> 
</div>

來源

2016-07-28 Mark Anthony

這是一個不好的做法 –

你可以用javascript來做到這一點。 – RasmusGlenvig

你需要使用JavaScript來使它彈出頁面加載 – Sylvain

-1

我修改您的codepen

body { 
 
    font-family: Arial, sans-serif; 
 
    background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat; 
 
    background-size: cover; 
 
    height: 100vh; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
    font-family: Tahoma, Arial, sans-serif; 
 
    color: #06D85F; 
 
    margin: 80px 0; 
 
} 
 

 
.box { 
 
    width: 40%; 
 
    margin: 0 auto; 
 
    background: rgba(255,255,255,0.2); 
 
    padding: 35px; 
 
    border: 2px solid #fff; 
 
    border-radius: 20px/50px; 
 
    background-clip: padding-box; 
 
    text-align: center; 
 
} 
 

 
.button { 
 
    font-size: 1em; 
 
    padding: 10px; 
 
    color: #fff; 
 
    border: 2px solid #06D85F; 
 
    border-radius: 20px/50px; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    transition: all 0.3s ease-out; 
 
} 
 
.button:hover { 
 
    background: #06D85F; 
 
} 
 

 
.overlay { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    transition: opacity 500ms; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
} 
 
.overlay:not(:target) { 
 
    visibility: visible; 
 
    opacity: 1; 
 
} 
 

 
.popup { 
 
    margin: 70px auto; 
 
    padding: 20px; 
 
    background: #fff; 
 
    border-radius: 5px; 
 
    width: 30%; 
 
    position: relative; 
 
    transition: all 5s ease-in-out; 
 
} 
 

 
.popup h2 { 
 
    margin-top: 0; 
 
    color: #333; 
 
    font-family: Tahoma, Arial, sans-serif; 
 
} 
 
.popup .close { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 30px; 
 
    transition: all 200ms; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
    color: #333; 
 
} 
 
.popup .close:hover { 
 
    color: #06D85F; 
 
} 
 
.popup .content { 
 
    max-height: 30%; 
 
    overflow: auto; 
 
} 
 

 
@media screen and (max-width: 700px){ 
 
    .box{ 
 
    width: 70%; 
 
    } 
 
    .popup{ 
 
    width: 70%; 
 
    } 
 
}

<h1>Popup/Modal Windows without JavaScript</h1> 
 
<div class="box"> 
 
\t <a class="button" href="#popup1">Let me Pop up</a> 
 
</div> 
 

 
<div id="popup1" class="overlay"> 
 
\t <div class="popup"> 
 
\t \t <h2>Here i am</h2> 
 
\t \t <a class="close" href="#popup1">&times;</a> 
 
\t \t <div class="content"> 
 
\t \t \t Thank to pop me out of that button, but now i'm done so you can close this window. 
 
\t \t </div> 
 
\t </div> 
 
</div>

來源

2016-07-28 06:55:52

你能解釋一下你做了什麼改變嗎？ –

如果僞元素顯示模態：目標，我顯示模式與：不（：目標）和更改關閉按鈕，鏈接目標編號 –

你是最好的人！謝謝！！ –

-1

您可以用動畫做出來。一個簡單的例子：

#popup1 { 
 
    animation-name: welcome; 
 
    animation-duration: 2s; 
 
} 
 
@keyframes welcome { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    30% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<div id="popup1" class="overlay">Hey!</div>

來源

2016-07-28 06:55:43 nicael

-1

隨着技術使用:target僞類，可以直接與附加的ID目標那個彈出元素。

試試這個，http://codepen.io/imprakash/pen/GgNMXO#popup1

剛剛追加#popup1的目標。因此，只要您打開，彈出窗口將被定位並打開。

來源

2016-07-28 07:45:27

在模態中使用純HTML和CSS

回答

相關問題