Jquery加载完成后弹出层

来源：互联网发布：java 如何做物联网开发编辑：程序博客网时间：2024/06/05 09:16
Jquery加载完成后弹出层：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>Jquery加载完成后弹出层</title><meta charset="utf-8" />    <style>        body,div{padding:0; margin:0;}        .shadowCon{            left:0;            top:0;            width:100%;            height:100%;            background:#000;            opacity:0.6;            filter:alpha(opacity=60);            position: fixed;             z-index: 1000;         }        .popup-container{            position:fixed;            left:50%;            top:50%;            z-index:1001;            width:500px;            height:300px;            margin-left:-250px;            margin-top:-150px;            display:inline-block;            border-radius:5px;            -webkit-border-radius: 5px;            -moz-border-radius: 5px;            -o-border-radius: 5px;            background:#fff;            border: 1px solid #f1f1f1;            overflow: hidden;        }        .popup-title{            font-size:16px;            text-align:center;            line-height:42px;            color:#111;            background:#fff;            position:absolute;            left:0;            top:0;            z-index:999;            width:100%;        }        .popup-content{            font-size:14px;            padding:15px 20px;            color:#555;            height:100%;            overflow:auto;            text-align:left;            padding-bottom:46px;            padding-top:42px;        }        .btn-close{            position:absolute;            right:10px;            top:3px;            font-size:24px;            cursor:pointer;            z-index:1000;        }        .btn-box{            border-top:1px solid #f1f1f1;            text-align:right;            position:absolute;            left:0;            background:#fff;            bottom:0;            z-index:999;            width:100%;        }        .popup-container .btn-p{             border:1px solid #f1f1f1;             border-radius:3px;             -webkit-border-radius: 3px;             -moz-border-radius: 3px;             -o-border-radius: 3px;             box-sizing:border-box;             -webkit-box-sizing: border-box;             -moz-box-sizing: border-box;             -o-box-sizing: border-box;             line-height:30px;             margin:7px 10px 7px 0px;             padding:0 10px;             display:inline-block;             text-align:center;             font-size:14px;             cursor:pointer;             color:#222;        }      .exhibitionWarp{clear:both;min-height:100px;}      .exhibitionWarp h4{          display: block;          -webkit-margin-before: 1.33em;          -webkit-margin-after: 1.33em;          -webkit-margin-start: 0px;          -webkit-margin-end: 0px;          font-weight: bold;      }      .exhibitionWarp img{width: 170px;display:inline-block;float:left; margin:0px 20px 20px 0px;}      .exhibitionWarp p{        line-height: 23px;        padding-top: 2px;      }      .animatedIn{        -webkit-animation-duration: .45s;        -moz-animation-duration: .45s;        -o-animation-duration: .45s;        animation-duration: .45s;        -webkit-animation-name: linearBottom;        -moz-animation-name: linearBottom;        -o-animation-name: linearBottom;        animation-name: linearTop;      }     @keyframes linearTop {        0%{        -webkit-transform: translate3d(0,80px,0);         -moz-transform: translate3d(0,80px,0);         -o-transform: translate3d(0,80px,0);        transform: translate3d(0,80px,0);        opacity: 0;        filter:alpha(opacity=0);    }    100%{       -webkit-transform: translate3d(0,0,0);      -moz-transform: translate3d(0,0,0);      -o-transform: translate3d(0,0,0);      transform: translate3d(0,0,0);      opacity: 1;      filter:alpha(opacity=100);     }    }    </style></head><body>    <div class="shadowCon"></div>    <div class="popup-container animatedIn">        <div class="popup-title">Company latest exhibition activities</div>        <div class="popup-content">            <div class="content">                <div class="exhibitionWarp">                    <h4>IFA in the autumn of 2017</h4>                    <img src="http://www.qianduanzhan.com/170x140?text=IFA"/>                    <p>Date:  3th-6th Sep,2017</p>                    <p>Place:Berlin, Germany</p>                    <p>Booth No.:  111,Hall S7.2</p>                </div>                <div class="exhibitionWarp">                    <h4>Global Sources Exhibitions in the autumn of 2017</h4>                    <img src="http://www.qianduanzhan
.com/170x140?text=Global Sources" /> <p>Date: 18th-21th Oct,2017</p> <p>Place:HongKong</p> <p>Booth No.: 10L09</p> </div> <div class="exhibitionWarp"> <h4>CES in the autumn of 2018</h4> <img src="http://www.qianduanzhan.com/170x140?text=CES" /> <p>Date: 9th-12th Jan,2018</p> <p>Place:Las Vegas,USA</p> <p>Hall: LVCC South Hall 4</p> <p>Booth No.: 36915</p> <p> </p> <p> </p> </div> </div> </div> <div class="btn-close">×</div> <div class="btn-box"> <p class="btn-p">Close</p> </div> </div> <script src="http://www.qianduanzhan.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(function () { $(".btn-close").click(function () { $(".popup-container").hide(); $(".shadowCon").hide(); }); $(".btn-p").click(function () { $(".popup-container").hide(); $(".shadowCon").hide(); }); }); </script></body></html>
阅读全文
0 0