商业合作
免费在我们的网站上发布一篇文章
公众号承接推广任务
联系我们 微信号码: 18003606519
今天在这篇文章中,我们将学习如何使用HTML,CSS和JQuery创建弹窗。PZE天宁日记|网页模板_网页设计_网站建设
弹窗会强制用户与其交互,一般用于警告或者信息框。在本文中只需要JQuery,无需 Bootstrap 等第三方框架与库,我们会使用纯CSS来控制和打造它的外观。PZE天宁日记|网页模板_网页设计_网站建设
弹窗位于可视窗口内,使用叠加层来实现,不受iframe影响。PZE天宁日记|网页模板_网页设计_网站建设
PZE天宁日记|网页模板_网页设计_网站建设
PZE天宁日记|网页模板_网页设计_网站建设
弹窗演示2PZE天宁日记|网页模板_网页设计_网站建设
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");
    })

没有发现主题没有发现主题