首先这个图片要是png的,如果我们希望这个图片不是全屏的就得把这个png的图片上下左右留白。
最主要的是利用一个遮罩层把背景色全屏的遮住,在最上面放一个图片。
<div class=”fade”></div> 这是一个遮罩层
<img src=”images/storedialog.png” class=”dialog”> 这个图片
.fade{position:fixed;top:0;left:0;background:rgba(0, 0, 0, 0.73);z-index:99;display:none;}遮罩层要位置固定且全屏
.dialog{position:fixed;left:50%;top:50%;margin-left:-100px;margin-top:-100px;z-index:100;}位置固定在屏幕中间的,可以调整top,margin-top,left,margin-left控制它的位置。
点击按钮让他们都显示
$("button").click(function(){
$(".fade").show();
$(".dialog").show();
});