我在 Razor View 中有一个纯 HTML5/CSS 模态窗口 UserPanel
在 ASP.NET MVC 应用程序中。我可以通过单击链接激活此模式窗口:<p><a href="#modal" class="btn go">Activate Modal</a></p>
问题是我希望在访问 /UserPanel
时始终显示它页面,而不必单击此按钮。
模态的短 html,然后是完整的 css(有效 -> 模态仅在单击按钮后显示):
html:
<div class="container">
<p><a href="#modal" class="btn go">Activate Modal</a></p>
</div>
<div id="modal">
<div class="modal-content">
<div class="header">
<h2>Notification</h2>
</div>
<div class="copy">
<p>There is new Announcment to read!</p>
</div>
<div class="cf footer">
<a href="#" class="btn">Close</a>
</div>
</div>
<div class="overlay"></div>
</div>
CSS:
<style>
#modal {
left: 50%;
margin: -250px 0 0 -40%;
opacity: 0;
position: absolute;
top: -50%;
visibility: hidden;
width: 80%;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#modal:target {
opacity: 1;
top: 50%;
visibility: visible;
}
#modal .header, #modal .footer {
border-bottom: 1px solid #e7e7e7;
border-radius: 5px 5px 0 0;
}
#modal .footer {
border: none;
border-top: 1px solid #e7e7e7;
border-radius: 0 0 5px 5px;
}
#modal h2 {
margin: 0;
}
#modal .btn {
float: right;
}
#modal .copy, #modal .header, #modal .footer {
padding: 15px;
}
.modal-content {
background: #f7f7f7;
position: relative;
z-index: 20;
border-radius: 5px;
}
#modal .copy {
background: #fff;
}
#modal .overlay {
background-color: #000;
background: rgba(0,0,0,.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
</style>
问题:如何在访问该页面时始终显示模态?
最佳答案
将您的 HTML 更改为此(我们只针对关闭按钮):
<div id="modal">
<div class="modal-content">
<div class="header">
<h2>Notification</h2>
</div>
<div class="copy">
<p>There is new Announcment to read!</p>
</div>
<div class="cf footer">
<a href="#modal" class="btn">Close</a>
</div>
</div>
<div class="overlay"></div>
</div>
现在是 CSS:
#modal {
left: 50%;
margin: -250px 0 0 -40%;
opacity: 1;
position: absolute;
top: 50%;
visibility: visible;
width: 80%;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#modal:target{
opacity: 0;
top: -50%;
visibility: hidden;
}
#modal .header, #modal .footer {
border-bottom: 1px solid #e7e7e7;
border-radius: 5px 5px 0 0;
}
#modal .footer {
border: none;
border-top: 1px solid #e7e7e7;
border-radius: 0 0 5px 5px;
}
#modal h2 {
margin: 0;
}
#modal .btn {
float: right;
}
#modal .copy, #modal .header, #modal .footer {
padding: 15px;
}
.modal-content {
background: #f7f7f7;
position: relative;
z-index: 20;
border-radius: 5px;
}
#modal .copy {
background: #fff;
}
#modal .overlay {
background-color: #000;
background: rgba(0,0,0,.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
我们只是让模态默认显示,然后在点击时隐藏它。当然,如果你希望它一直可见,只需删除关闭按钮即可。 See fiddle here
关于css - 如何在不单击激活它的链接的情况下始终显示纯 HTML5/CSS 模式窗口?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25676325/