1. 程式人生 > >彈出一個圖片

彈出一個圖片

首先這個圖片要是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();

});