css彈出遮罩層

2021-07-04 04:34:04 字數 610 閱讀 6540

說明:需要jquery支援,支援ie8+,googlechrome,firefox,話不多說,上**。

html:

type="button"

onclick="showmaskshadow()"

value="彈出遮罩層" />

class="bgdiv">

div>

class="contentdiv">

type="button"

onclick="hidemaskshadow()"

value="點我隱藏" />

您可以在這裡自定義內容h2>

div>

css:.

/**

* 彈出div視窗樣式

**/.bgdiv

.contentdiv

js:

// 彈出遮罩層

function

showmaskshadow

() // 隱藏遮罩層

function

hidemaskshadow

()

純CSS遮罩層特效

demo 背景顏色 漸變 邊框圓角 相對定位 多餘邊框隱藏 滑鼠指標變成小手 box 設定乙個偽類before 前置的 content 內容設定為空 背景設定為透明背景顏色 寬高各為父級的百分百 整體透明度為0 定位為絕對定位 top 為 0 left 為 0 層次結構 index為0 transi...

div css彈出層半透明遮罩層效果實現

背景半透明,覆蓋整個可視區域的遮罩層效果在工作中經常會遇到,這篇文章主要介紹了當內容超過一屏時如何做到多瀏覽器的相容性。下面我們通過乙個簡單的例子看看如何實現,高手請繞道。html 很簡單 1 半透明效果可以使用 css3 中的 opacity 屬性,在低版本的ie瀏覽器中使用ie的alpha 濾鏡...

如何彈出遮罩層遮蔽頁面所有操作

這次專案中需要使用在彈出視窗時使用遮罩層來遮蔽頁面上其他的操作,所以參考資料寫了乙個可復用的 brmms brmms.backdiv 彈出乙個底部的層遮住頁面,禁止使用者進行當前層外的其他操作 brmms.backdiv.popbackdiv function 去掉底部的層 brmms.backdi...