样式:
<style>
.cover{
position: fixed;
top:0;
right:0;
bottom:0;
left:0;
background-color: rgba(0,0,0,0.2);
z-index:9998;
}
.modal {
left:50%;
width:100%;
height:1080px;
margin-left:-50%;
position: fixed;
margin-top:0px;
background-size: cover;
/*padding-bottom: 145%;*/
z-index: 9999;
text-align:center
}
.close {
float: right;
/*在这里将x移动到右上角*/
margin-right: 15px;
margin-top: 10px;
font-size: 16px;
cursor:pointer;
}
.hide {
display: none;
/*表示不显示*/
}
</style>
<body>
<div class="cover hide" ></div>
<div class="modal hide">
<%--<span class="close" id="close">×</span>--%>
<img ID="img" src="" style="margin:auto;margin-top:0px;"/>
</div>
</body>
$(".modal").css({ height:$(window).height()+'px', width: $(window).width() + 'px'});
$("#img").css({height:$(window).height()+'px', width: $(window).width() + 'px'})
$(function () {
var first = sessionStorage.getItem("first"); //首次加载
//首次加载
if (!first) {
sessionStorage.setItem("first", "1");
$(".modal").removeClass("hide")
$(".cover").removeClass("hide")
$("#close").click(function () {
$(".modal").addClass("hide")
$(".cover").addClass("hide")
})
//展示3秒
setTimeout(function () {
$(".modal").addClass("hide")
$(".cover").addClass("hide")
},3000)
}
})