jquery html加载完,jQuery加载完成后弹出层

Html

Css

Js

Company latest exhibition activities

IFA in the autumn of 2017

Date: 3th-6th Sep,2017

Place:Berlin, Germany

Booth No.: 111,Hall S7.2

Global Sources Exhibitions in the autumn of 2017

Date: 18th-21th Oct,2017

Place:HongKong

Booth No.: 10L09

CES in the autumn of 2018

Date: 9th-12th Jan,2018

Place:Las Vegas,USA

Hall: LVCC South Hall 4

Booth No.: 36915

×

Close

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);

}

}

$(function() {

$(".btn-close").click(function() {

$(".popup-container").hide();

$(".shadowCon").hide();

});

$(".btn-p").click(function() {

$(".popup-container").hide();

$(".shadowCon").hide();

});

});