今天在这篇文章中，我们将学习如何使用HTML，CSS和JQuery创建弹窗。
PZE天宁日记|网页模板_网页设计_网站建设弹窗会强制用户与其交互，一般用于警告或者信息框。在本文中只需要JQuery，无需 Bootstrap 等第三方框架与库，我们会使用纯CSS来控制和打造它的外观。
PZE天宁日记|网页模板_网页设计_网站建设弹窗位于可视窗口内，使用叠加层来实现，不受iframe影响。
PZE天宁日记|网页模板_网页设计_网站建设PZE天宁日记|网页模板_网页设计_网站建设PZE天宁日记|网页模板_网页设计_网站建设
PZE天宁日记|网页模板_网页设计_网站建设PZE天宁日记|网页模板_网页设计_网站建设.HTMLPZE天宁日记|网页模板_网页设计_网站建设
<!DOCTYPE html>
<html>
<head>
<title>Jquery弹窗方案 - 天宁日记</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;500;700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="container cookies">
<i class="fas fa-times close"></i>
<img src="images/growth.png" class="img" alt="免费在天宁日记的网站上发布">
<p class="text">天宁日记网站每日更新原创文章，包含网页设计、跨境电商网站建设、加密数字货币宣发制作等。</p>
<a href="https://www.axzb.com/service/2022-12-01/12.html" class="btn btn-blue" target="_blank">现在去免费发布</a>
</div>
<div class="container logged">
<i class="fas fa-times close"></i>
<img src="images/certificate.png" class="img" alt="在天宁日记的公众号上发布">
<p class="text">天宁日记的公众号、百家号、微博和头条号接受商业宣传稿件，我们会根据您的情况进行原创设计。</p>
<a href="https://www.axzb.com/service/2022-12-01/17.html" class="btn btn-red" target="_blank">联系天宁日记</a>
</div>
<a href="#" class="btn-open" id="cookies">免费发布</a>
<a href="#" class="btn-open" id="logged">付费投稿</a>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</body>
</html>
PZE天宁日记|网页模板_网页设计_网站建设.CSS
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.wrapper {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 1rem;
background-color: #E5E5E5;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
min-height: 100vh;
position: relative;
}
.container{
background:#fff;
padding:3em;
text-align:center;
border-radius: 0.5em;
max-width: 400px;
display:none;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:2;
transition: 0.3s all;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
animation:zoomIn 1s;
}
.container.active{
display:block;
transform:scale(1) translate(-50%,-50%);
}
@0webkit-keyframes zoomIn{
0%{transform:scale(0.75) translate(-50%,-50%);}
100%{transform:scale(1) translate(-50%,-50%);}
}
@-moz-keyframes zoomIn{
0%{transform:scale(0.75) translate(-50%,-50%);}
100%{transform:scale(1) translate(-50%,-50%);}
}
@-o-keyframes zoomIn{
0%{transform:scale(0.75) translate(-50%,-50%);}
100%{transform:scale(1) translate(-50%,-50%);}
}
@keyframes zoomIn{
0%{transform:scale(0.75) translate(-50%,-50%);}
100%{transform:scale(1) translate(-50%,-50%);}
}
.wrapper:before{
content:'';
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:1;
opacity: 0;
display:none;
}
.wrapper.active::before{
opacity: 1;
display: block;
}
.fa-times{
color:#ddd;
font-size:1.5rem;
position:absolute;
top:1em;
right:1em;
cursor: pointer;
}
.img{
margin:1.2em 0;
width:60px;
}
.text{
text-align: center;
font-size:1.1rem;
font-weight:500;
margin-bottom:2em;
}
.btn{
font-size: 1rem;
font-weight: 400;
letter-spacing:0.05em;
text-decoration: none;
color:#fff;
padding:0.8em 0.4em;
display: block;
border-radius: 0.4em;
margin-bottom:1.6em;
}
.btn-red {
background-color: #ED6755;
-webkit-box-shadow: 0px 13px 34px -6px rgba(237, 103, 85, 1);
-moz-box-shadow: 0px 13px 34px -6px rgba(237, 103, 85, 1);
box-shadow: 0px 13px 34px -6px rgba(237, 103, 85, 1);
}
.btn-blue {
background-color: #1C1B5E;
-webkit-box-shadow: 0px 13px 34px -6px rgba(28, 27, 94, 1);
-moz-box-shadow: 0px 13px 34px -6px rgba(28, 27, 94, 1);
box-shadow: 0px 13px 34px -6px rgba(28, 27, 94, 1);
}
.btn-open{
font-size: 1rem;
font-weight: 400;
letter-spacing:0.05em;
text-decoration: none;
color:#fff;
padding:0.8em 3em;
display: block;
border-radius: 0.4em;
margin-bottom:1.6em;
background-color: #1C1B5E;
margin-left:1em;
}
.btn-open:last-child{
background-color: #ED6755;
}
PZE天宁日记|网页模板_网页设计_网站建设.JS
$(".btn-open").click(function(){
let id = $(this).attr("id");
let show = $("."+id).css("display");
if(show == "none"){
$("."+id).toggleClass("active");
$(".wrapper").toggleClass("active");
}else{
$("."+id).toggleClass("active");
$(".wrapper").removeClass("active");
}
})
$(".close").click(function(){
$(".container").removeClass("active");
$(".wrapper").removeClass("active");
})
2023-02-22
50
黑公网安备 23010302001482号
公众号：天宁日记
