Jquery加载完成后弹出层

最新推荐文章于 2023-03-16 09:40:20 发布

yudeboo

最新推荐文章于 2023-03-16 09:40:20 发布

阅读量1.4k

点赞数

文章标签： Jquery

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>

yudeboo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery加载完成后弹出层

Jquery加载完成后弹出层： Jquery加载完成后弹出层 body,div{padding:0; margin:0;} .shadowCon{ left:0; top:0; width:100%; height:100%;
复制链接

扫一扫