css實現(xiàn)彈出對話框同時出現(xiàn)遮罩層的方法

這篇文章主要介紹了css實現(xiàn)彈出對話框同時出現(xiàn)遮罩層的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司致力于互聯(lián)網(wǎng)網(wǎng)站建設(shè)與網(wǎng)站營銷，提供成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)站開發(fā)、seo優(yōu)化、網(wǎng)站排名、互聯(lián)網(wǎng)營銷、成都微信小程序、公眾號商城、等建站開發(fā)，創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)策劃專家，為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，幫助客戶在新的全球化互聯(lián)網(wǎng)環(huán)境中保持優(yōu)勢。

最近的項目有留言板彈出對話框，然后我就自己寫了一個靜態(tài)的，下面就直接上代碼：

<p class="fade"></p>
<p class="succ-pop">
	<h3 class="title">
		這里是要填寫的內(nèi)容
	</h3>
</p>

/*灰色遮罩層*/
.fade {
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   position: fixed;
   left: 0;
   top: 0;
   z-index: 2;
}
/*彈出層*/
.succ-pop {
   width: 400px;
   height: 300px;
   background: #fff;
   position: fixed;/*這里的定位可以根據(jù)自己喜好選擇absolute或者fixed*/
   left: 50%;	
   top: 50%;/*這里的top根據(jù)自己的需要定*/
   margin-left: -200px;
   margin-top: -150px;
   z-index: 3;
   border-radius: 5px;
   box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.succ-pop h3.title {
   text-align: center;
   color: lightskyblue;
}

如果你不希望有彈框的時候頁面還會滾動，那就加上$('body').css('overflow-y','hidden');就可以了。

感謝你能夠認真閱讀完這篇文章，希望小編分享css實現(xiàn)彈出對話框同時出現(xiàn)遮罩層的方法內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細的解決方法等著你來學(xué)習(xí)!

標(biāo)題名稱：css實現(xiàn)彈出對話框同時出現(xiàn)遮罩層的方法
瀏覽地址：http://m.kartarina.com/article48/pgoghp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、全網(wǎng)營銷推廣、服務(wù)器托管、微信公眾號、App開發(fā)、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)