html5遮罩層,html遮罩層怎么做

html5如何實現彈出提示框，并且伴隨遮罩層并且可以關閉彈出框

通過jquery的show()和hide()函數聯合使用，實現彈出窗口。

西固網站建設公司成都創新互聯公司,西固網站設計制作，有大型網站制作公司豐富經驗。已為西固數千家提供企業網站建設服務。企業網站搭建\外貿營銷網站建設要多少錢，請找那個售后服務好的西固做網站的公司定做！

一、show（）和hide（）函數解析：

1、show() 方法顯示隱藏的被選元素。

注意：show() 適用于通過 jQuery 方法和 CSS 中 display:none 隱藏的元素（不適用于通過 visibility:hidden 隱藏的元素）。

2、hide() 方法隱藏被選元素。

這與 CSS 屬性 display:none 類似，但是隱藏的元素不會被完全顯示（不再影響頁面的布局）。

二、設計一個HTML頁面，包括一個簡單的彈出窗，和一個顯示按鈕。其中，調用了jquery的以上兩個函數。具體代碼如下：

三、設計遮罩層的樣式，如下：

四、彈出窗口的css樣式，代碼如下：

五、初始頁面如下：

六、點擊按鈕，查看彈出窗口結果：

七、關閉彈出窗后，打開開發者中心，如下：

寫一個fixed定位的div，z-index稍微高一點，設置一下背景色和透明度就行

最普遍的做法遮罩層默認display:none;需要彈出的場景display:block;關閉遮罩層display:none;

第一步：新建一個html頁面

頁面中先做出一個【領紅包】的按鈕，如圖（圖中左側是效果右側是代碼），點擊這個按鈕就會彈出一個紅包的活動消息，即我們要的遮罩效果

css遮罩層怎么做

第二步：做出遮罩層

遮罩層的作用就是將層后面的內容都遮住，覆蓋全屏，所以：

寬高都設為：100%；

位置 position：absolute；left：0； top:0;

背景色一般都設為透明的 background: rgba(0,0,0,0.5);

層的順序 z-index:100; (設置一個比較大的數值)

css遮罩層怎么做

第三步：做出遮罩層上的內容

1、在遮罩層上添加活動效果圖

2、關閉活動信息彈出框的【關閉】按鈕

注意:遮罩層上的內容也要添加上z-index且數值要比遮罩層的大，z-index:101

如圖（左側效果，右側代碼）

css遮罩層怎么做

第四步：用js實現遮罩效果演示

首先我們看到的頁面上是沒有遮罩層的，只有一個【領紅包】的按鈕在頁面中；

然后我們點就【領紅包】按鈕，就彈出遮罩效果；再要關閉遮罩層時點擊右上角的關閉按鈕，就退出了遮罩成的活動信息。具體操作如下：

1、將遮罩層隱藏起來 display：none；

2、點擊【領紅包】時，遮罩層顯示 display：block;

3、點擊關閉按鈕，遮罩層消失 display：none；

如圖

css遮罩層怎么做

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

猜你還喜歡下面的內容