HTML實現(xiàn)遮罩層的方法 HTML中如何使用遮罩層

當前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)頁制作

來源：易賢網(wǎng) 閱讀：3995 次日期：2016-07-04 13:53:03

溫馨提示：易賢網(wǎng)小編為您整理了“HTML實現(xiàn)遮罩層的方法 HTML中如何使用遮罩層”,方便廣大網(wǎng)友查閱！

這篇文章主要為大家詳細介紹了HTML實現(xiàn)遮罩層的方法，Web頁面中使用遮罩層，可防止重復操作，那么如何在HTML中使用遮罩層？感興趣的小伙伴們可以參考一下

Web頁面中使用遮罩層，可防止重復操作，提示loading；也可以模擬彈出模態(tài)窗口。

實現(xiàn)思路：一個DIV作為遮罩層，一個DIV顯示loading動態(tài)GIF圖片。在下面的示例代碼中，同時展示了如何在iframe子頁面中調(diào)用顯示和隱藏遮罩層。

示例代碼：

index.html

XML/HTML Code

代碼如下:

<!DOCTYPE html>

<head>

<title>HTML遮罩層</title>

</head>

<body>

HTML遮罩層使用

</span>

</div>

scrolling="no" frameborder="0"

style="border: 0px;margin: 0px; padding: 0px; width: 100%; height: 100%;overflow: hidden;"

onload="rightIFrameLoad(this)" src="body.html"></iframe>

</div>

</div>

</body>

</html>

index.css

CSS Code

代碼如下:

* {

margin: 0;

padding: 0;

}

html, body {

width: 100%;

height: 100%;

font-size: 14px;

}

div.header {

width: 100%;

height: 100px;

border-bottom: 1px dashed blue;

}

div.title-outer {

position: relative;

top: 50%;

height: 30px;

}

span.title {

text-align: left;

position: relative;

left: 3%;

top: -50%;

font-size: 22px;

}

div.body {

width: 100%;

}

.overlay {

position: absolute;

top: 0px;

left: 0px;

z-index: 10001;

display:none;

filter:alpha(opacity=60);

background-color: #777;

opacity: 0.5;

-moz-opacity: 0.5;

}

.loading-tip {

z-index: 10002;

position: fixed;

display:none;

}

.loading-tip img {

width:100px;

height:100px;

}

.modal {

position:absolute;

width: 600px;

height: 360px;

border: 1px solid rgba(0, 0, 0, 0.2);

box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.5);

display: none;

z-index: 10003;

border-radius: 6px;

}

index.js

JavaScript Code

代碼如下:

function rightIFrameLoad(iframe) {

var pHeight = getWindowInnerHeight() - $('#header').height() - 5;

$('div.body').height(pHeight);

console.log(pHeight);

}

// 瀏覽器兼容取得瀏覽器可視區(qū)高度

function getWindowInnerHeight() {

var winHeight = window.innerHeight

|| (document.documentElement && document.documentElement.clientHeight)

|| (document.body && document.body.clientHeight);

return winHeight;

}

// 瀏覽器兼容取得瀏覽器可視區(qū)寬度

function getWindowInnerWidth() {

var winWidth = window.innerWidth

|| (document.documentElement && document.documentElement.clientWidth)

|| (document.body && document.body.clientWidth);

return winWidth;

}

/**

* 顯示遮罩層

function showOverlay() {

// 遮罩層寬高分別為頁面內(nèi)容的寬高

$('.overlay').css({'height':$(document).height(),'width':$(document).width()});

$('.overlay').show();

}

/**

* 顯示Loading提示

function showLoading() {

// 先顯示遮罩層

showOverlay();

// Loading提示窗口居中

$("#loadingTip").css('top',

(getWindowInnerHeight() - $("#loadingTip").height()) / 2 + 'px');

$("#loadingTip").css('left',

(getWindowInnerWidth() - $("#loadingTip").width()) / 2 + 'px');

$("#loadingTip").show();

$(document).scroll(function() {

return false;

});

}

/**

* 隱藏Loading提示

function hideLoading() {

$('.overlay').hide();

$("#loadingTip").hide();

$(document).scroll(function() {

return true;

});

}

/**

* 模擬彈出模態(tài)窗口DIV

* @param innerHtml 模態(tài)窗口HTML內(nèi)容

function showModal(innerHtml) {

// 取得顯示模擬模態(tài)窗口用DIV

var dialog = $('#modalDiv');

// 設(shè)置內(nèi)容

dialog.html(innerHtml);

// 模態(tài)窗口DIV窗口居中

dialog.css({

'top' : (getWindowInnerHeight() - dialog.height()) / 2 + 'px',

'left' : (getWindowInnerWidth() - dialog.width()) / 2 + 'px'

});

// 窗口DIV圓角

dialog.find('.modal-container').css('border-radius','6px');

// 模態(tài)窗口關(guān)閉按鈕事件

dialog.find('.btn-close').click(function(){

closeModal();

});

// 顯示遮罩層

showOverlay();

// 顯示遮罩層

dialog.show();

}

/**

* 模擬關(guān)閉模態(tài)窗口DIV

function closeModal() {

$('.overlay').hide();

$('#modalDiv').hide();

$('#modalDiv').html('');

}

body.html

XML/HTML Code

代碼如下:

<!DOCTYPE html>

<head>

* {

margin: 0;

padding: 0;

}

html, body {

width: 100%;

height: 100%;

}

.outer {

width: 200px;

height: 120px;

position: relative;

top: 50%;

left: 50%;

}

.inner {

width: 200px;

height: 120px;

position: relative;

top: -50%;

left: -50%;

}

.button {

width: 200px;

height: 40px;

position: relative;

}

.button#btnShowLoading {

top: 0;

}

.button#btnShowModal {

top: 30%;

}

</style>

function showOverlay() {

// 調(diào)用父窗口顯示遮罩層和Loading提示

window.top.window.showLoading();

// 使用定時器模擬關(guān)閉Loading提示

setTimeout(function() {

window.top.window.hideLoading();

}, 3000);

}

function showModal() {

// 調(diào)用父窗口方法模擬彈出模態(tài)窗口

window.top.showModal($('#modalContent').html());

}

</script>

</head>

<body>

<button id='btnShowLoading' class='button' onclick='showOverlay();'>點擊彈出遮罩層</button>

<button id='btnShowModal' class='button' onclick='showModal();'>點擊彈出模態(tài)窗口</button>

</div>

</div>

</div>

</body>

</html>

更多信息請查看網(wǎng)頁制作

上一篇：解析HTML中rel=“nofollow”的作用及rel屬性的使用

下一篇：深入理解html表單輸入監(jiān)聽

易賢網(wǎng)手機網(wǎng)站地址：HTML實現(xiàn)遮罩層的方法 HTML中如何使用遮罩層

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇剩?/div>

相關(guān)閱讀網(wǎng)頁制作

使用CSS制作立體導航欄10月30日

用純CSS3實現(xiàn)網(wǎng)頁中常見的小箭頭10月30日

有關(guān)HTML5中背景音樂的自動播放功能10月30日

HTML5、Select下拉框右邊加圖標的實現(xiàn)代碼(增進用戶體驗)10月30日

html5實現(xiàn)圖片轉(zhuǎn)圈的動畫效果——讓頁面動起來10月30日

html5清空畫布方法(三種)10月30日

HTML實現(xiàn)移動端固定懸浮半透明搜索框10月30日

HTML5 文件域+FileReader 分段讀取文件并上傳到服務(wù)器10月30日

Dreamweaver怎么設(shè)計彩色邊框的表格?10月30日

Dreamweaver怎么給個人簡歷添加照片并排版?10月30日

基于HTML5的WebGL實現(xiàn)json和echarts圖表展現(xiàn)在同一個界面10月30日

解決HTML5手機端頁面縮放的問題10月30日

利用純CSS實現(xiàn)居中的七大方法示例09月29日

CSS3中偽元素::before和::after的用法示例09月29日

詳解使用 CSS 的 font-size-adjust 屬性改善網(wǎng)頁排版09月29日

HTML5+CSS3 實現(xiàn)靈動的動畫 TAB 切換效果(DEMO)09月29日

css3 pointer-events 介紹詳解09月29日

CSS :focus-within的具體使用09月29日

你所不知道的 CSS 動畫技巧與細節(jié)09月29日

詳解CSS3選擇器:nth-child和:nth-of-type之間的差異09月29日

易賢網(wǎng)移動網(wǎng)站

2026國考·省考課程試聽報名

報班類型
姓名
手機號
驗證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合