來自這裏。
這是ejsoon製作的彈框示例
你好!
代碼如下
<style>
.ejdialog {
z-index: 777777;
width: 100%;
height: 100vh;
left: 0;
top: 0;
position: fixed;
}
.popup__close{
z-index: 1200;
width: 2rem;
height: 2rem;
position: fixed;
top: 1.5rem;
right: 1.5rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTE5IDYuNDFMMTcuNTkgNSAxMiAxMC41OSA2LjQxIDUgNSA2LjQxIDEwLjU5IDEyIDUgMTcuNTkgNi40MSAxOSAxMiAxMy40MSAxNy41OSAxOSAxOSAxNy41OSAxMy40MSAxMnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==);
}
.ejdialog_contain {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
.ejdialog_hide {
display: none;
}
.ejdialog_before {
content: "";
box-sizing: border-box;
width: 100%;
background-color: #aff;
position: fixed;
left: 0;
top: 50%;
z-index: 700;
}
.ejdialog_contain {
position: fixed;
z-index: 1200;
}
.ejdialog_after {
width: 0;
height: 2px;
background-color: #aff;
position: absolute;
top: 50%;
left: 0;
margin-top: -1px;
z-index: 9900;
}
/*
animation
*/
.ejdialog_before {
will-change: height, top;
animation: open-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) .65s both;
}
.ejdialog_after{
will-change: width, opacity;
animation: line-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) both;
}
@keyframes line-animation{
0%{
width: 0;
opacity: 1;
}
99%{
width: 100%;
opacity: 1;
}
100%{
width: 100%;
opacity: 0;
}
}
@keyframes open-animation{
0%{
height: 0;
top: 50%;
}
100%{
height: 100vh;
top: 0;
}
}
.ejdialog_contain {
animation: fade .5s ease-out 1.3s both;
}
@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.ejdialog_content { padding: 12%;}
</style>
<button type="button" onclick="toggleejdialog()">彈個框</button>
<div class="ejdialog ejdialog_hide">
<div class="ejdialog_before">
</div>
<div class="ejdialog_contain">
<div class="ejdialog_content">
<h2>這是ejsoon製作的彈框示例</h2>
<p>
你好!
</p>
</div>
<div class="popup__close" onclick="toggleejdialog()"></div>
</div>
<div class="ejdialog_after">
</div>
</div>
<script>
function toggleejdialog() {
document.querySelector(".ejdialog").classList.toggle("ejdialog_hide");;
}
</script>