彈出的CSS隱藏元素

-2

我是新來的，有一個小問題。彈出的CSS隱藏元素

我發現這個這裏有一些問題它是如何工作的，我怎麼可能改變豆蔻事情：

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: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="#">&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>

我創造了我豆蔻模板。在此腳本上，當彈出窗口可見時，疊加類會更改背景顏色。

難道有可能隱藏背景元素h1和框與CSS不改變背景和沒有javascript？

爲了讓它更乾淨，我想隱藏彈出框後面的內容而不是.overlay {background：rgba（0，0，0，0.7）; }

問候，丹

來源

2017-05-05 Dan_FFM

你是什麼意思的背景元素..他們已經隱藏覆蓋..你想什麼，請更清晰和具體。 –

好吧我試着讓它更清晰， .overlay { 設置一個帶背景的新圖層。但是，我想隱藏彈出窗口後面的內容，而不是新的背景。我發現了一些隱藏/顯示覆選框或按鈕上的項目。但是，如果這可以用於彈出窗口，我不知道。 –

整體效果是由在div.overlay包含要顯示所有內容的事實來實現。訣竅是：

通常隱藏容器
通過鏈接到它
引用時激活它，出示容器通過鏈接到別的東西
去激活它。

這使用了一個相對較新的CSS僞類:target。它的工作方式是：

的URL有一個片段標識符（#something）
其id片段匹配得到:target僞類
元素如果URL的變化，那麼其他一些元素可以有針對性。

你會發現，兩個錨涉及：

顯示彈出，錨具有#popup1，其中popup1是彈出DIV
隱藏彈出，錨的id有#，其中最重要的是而不是#popup1，這樣div就不再被定位。

要回答的另一部分，使用這種技術，只有div的內容可以隱藏&顯示，所以如果你想隱藏或顯示其他內容，也不會以這種方式工作。爲此，您將需要JavaScript。

來源

2017-05-05 11:18:40 Manngo

好的，最好謝謝，我發現了一種隱藏彈出框內容的方法，已將背景圖像設置爲.overlay類，而不是顏色。但很高興知道其他方式在沒有javascript的情況下無法正常工作。 :)最好感謝您的描述 –

彈出的CSS隱藏元素

回答

相關問題