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://
.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>www.qianduanzhan