使用CSS的模態窗口效果

嗯，我想要做的是用CSS創建類似於模態窗口的東西。我爲JS用戶停用時創建了一些特殊功能，所以我可以用noscript標籤來顯示它。使用CSS的模態窗口效果

我有這樣的事情：

<div id="ns-overlay"> 
     <section> 
      <h1>¿Some title?</h1> 
      <h3>Subtitle</h3> 
      <p> 
       Content 
      </p> 
     </section> 
    </div>

這個CSS：

#ns-overlay{ 
    width: 100%; 
    height: 100%; 
    background: rgba(52, 52, 52, 0.5); 
    position: fixed; 
    z-index: 10000; 
    background-image: url('../imgs/ns-overlay.png'); 
    padding-top: 95px; 
} 

#ns-overlay section{ 
    color: #FFF; 
    width: 990px; 
    margin: auto; 
    background: rgba(52, 52, 52, 0.9); 
    padding: 10px; 
    box-sizing: border-box; 
} 

#ns-overlay section h1, 
#ns-overlay section h3, 
#ns-overlay section p{ 
    padding: 5px; 
    background: #126D4F; 
    /*background: linear-gradient(135deg, rgb(11, 104, 73) 0%, rgb(11, 78, 130) 100%);*/ 
    margin: 5px; 
} 

#ns-overlay section h1{ 
    width: 560px; 
    background: #126D4F; 
} 

#ns-overlay section h3{ 
    width: 510px; 
    background: #0B4F82; 
} 

#ns-overlay section p{ 
    background: none; 
}

JSFiddle example

什麼其實我是想的就是讓覆蓋消失，當用戶點擊它。

來源

2013-10-17 Andres Orozco

如果我明白你打算做什麼，我的答案是，CSS不適用於這種類型的事件。要使用click事件，您需要使用javascript。

來源

2013-10-17 02:32:25 marceloogeda

您可能可以使用：target僞元素獲得所需的效果。在div改變到錨並引用ID：

<a href="#ns-overlay" id="ns-overlay"> 
    <section> 
    <h1>Some title</h1> 
    <h3>subtitle.</h3> 
    <p>Content</p> 
    </section> 
</a>

然後設置＃NS-疊加到顯示：無目標：

#ns-overlay:target { 
    display:none; 
}

JSFiddle Example

來源

2013-10-17 04:34:19 mikowl

使用CSS的模態窗口效果

回答

相關問題