我很想知道您是否可以在不使用 JQuery 的情况下仅使用 HTML 和 CSS 制作模式弹出窗口。
有人知道这么简单的例子吗?
提前致谢!
最佳答案
是的,这是可能的。
您可以使用 :target
伪选择器来显示模式。
下面是一个包含一些转换的示例(代码结合自 shehary 的代码笔示例和 http://tympanus.net/Development/ModalWindowEffects ):
body {
background-color: #e74c3c;
}
a {
background-color: #c0392b;
color: #fff;
text-align: center;
width: 200px;
height: 50px;
line-height: 50px;
text-decoration: none;
border-radius: 2px;
}
a:hover {
background-color: #a5281b;
}
body > a {
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
transform: translateX(-50%) translateY(-50%);
}
.md-modal:target {
visibility: visible;
}
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: rgba(143,27,15,0.8);
transition: all 0.3s;
}
.md-modal:target ~ .md-overlay {
opacity: 1;
visibility: visible;
}
/* Content styles */
.md-content {
color: #fff;
background: #e74c3c;
position: relative;
border-radius: 3px;
margin: 0 auto;
}
.md-content h3 {
margin: 0;
padding: 0.4em;
text-align: center;
font-size: 2.4em;
font-weight: 300;
opacity: 0.8;
background: rgba(0,0,0,0.1);
border-radius: 3px 3px 0 0;
}
.md-content > div {
padding: 15px 40px 30px;
margin: 0;
font-weight: 300;
font-size: 1.15em;
}
.md-content > div p {
margin: 0;
padding: 10px 0;
}
.md-content > div ul {
margin: 0;
padding: 0 0 30px 20px;
}
.md-content > div ul li {
padding: 5px 0;
}
.md-content a {
display: block;
margin: 0 auto;
font-size: 0.8em;
}
/* Effect */
.md-modal .md-content {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.md-modal:target .md-content {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
<a href="#modal">MODAL</a>
<div class="md-modal" id="modal">
<div class="md-content">
<h3>Modal Dialog</h3>
<div>
<p>This is a modal window.</p>
<a class="md-close" href="#">Close me!</a>
</div>
</div>
</div>
<div class="md-overlay"></div>
如果您不习惯使用 visibility: hidden
,您可以使用 display: none
。但是在这种情况下你最好删除转换(visibility
可以在转换中使用,display
不能)。
关于html - 它可以用 HTML 和 CSS 制作一个模态弹出窗口吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31588871/