欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

DIV遮罩層如何實現(xiàn)

  發(fā)布時間：2012-11-20 09:07:17   作者：佚名   我要評論
今天有任務(wù)讓加個蒙版，JS小白的我在網(wǎng)上找了個修改下，改成了JS模版以后可以重復(fù)用啦,本文將詳細介紹DIV遮罩層如何實現(xiàn)，需要的 朋友可以參考下
今天有任務(wù)讓加個蒙版，JS小白的我在網(wǎng)上找了個修改下，改成了JS模版以后可以重復(fù)用啦。

復(fù)制代碼
代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>遮罩</title>
<style>
/*遮罩層*/
#tinybox_1 {
position:absolute;
width:1002px;
height:80px;
background:#FFF;
display: none;
z-index: 99999;
border:5px solid red;
display:none;
text-align:center;
padding:10px
}
#tinybox_1 h4{ display:block; margin:0 auto; width:1002px; line-height:40px}
.main{ width:98%; height:2000px; margin:0 auto; border:2px solid red; }
</style>
<!--遮罩 begin -->
<script type="text/javascript">
function BtHide(id){var Div = document.getElementById(id);if(Div){Div.style.display="none"}}
function BtShow(id){var Div = document.getElementById(id);if(Div){Div.style.display="block"}}
function BtPopload(showId){
// 高度減去 4px，避免在頁面無滾動條時顯示遮罩后出現(xiàn)流動條
var h = (Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight) - 4) + 'px';
var w = document.documentElement.scrollWidth + 'px';
var popCss = "background:#000;opacity:0.3;filter:alpha(opacity=30);position:absolute;left:0;top:0;overflow:hidden;border:0"http://遮罩背景
var rePosition_mask = function() {
pop_Box.style.height = h;
pop_Box.style.width = w;
pop_Iframe.style.height = h;
pop_Iframe.style.width = w;
if (document.documentElement.offsetWidth < 950) {
//防止正常寬度下點擊時 在 ff 下出現(xiàn)頁面滾動到頂部
document.documentElement.style.overflowX = "hidden";
}
}
var exsit = document.getElementById("popBox");
if (!exsit) {
var pop_Box = document.createElement("div");
pop_Box.id = "popBox";
document.getElementsByTagName("body")[0].appendChild(pop_Box);
pop_Box.style.cssText = popCss;
pop_Box.style.zIndex = "10";
var pop_Iframe = document.createElement("iframe"); // 這里如果用 div 的話，在 ie6 不能把 <select> 遮住
pop_Iframe.id = "popIframe";
document.getElementsByTagName("body")[0].appendChild(pop_Iframe);
pop_Iframe.style.cssText = popCss;
pop_Iframe.style.zIndex = "9";
rePosition_mask();
}
BtShow("popIframe");
BtShow("popBox");
BtShow(showId);
var pop_Win = document.getElementById(showId);
pop_Win.style.position = "absolute";
pop_Win.style.zIndex = "11";
var rePosition_pop = function() {
pop_Win.style.top = document.documentElement.scrollTop + document.body.scrollTop + document.documentElement.clientHeight/2 - pop_Win.offsetHeight/2 + 'px';
pop_Win.style.left = document.documentElement.scrollLeft + document.body.scrollLeft + document.documentElement.clientWidth/2 - pop_Win.offsetWidth/2 + 'px';
}
rePosition_pop();
window.onresize = function(){
w = document.documentElement.offsetWidth + 'px'; // 使用 scrollWidth 不能改變寬度
rePosition_mask();
rePosition_pop();
}
window.onscroll = function(){
rePosition_pop();
}
}
function BtPopShow(Bid,Did) {
var UploadBtn = document.getElementById(Bid);
if (UploadBtn){UploadBtn.onclick = function() {BtPopload(Did);return false;}}
}
function BtPopHide(Bid,Did) {
var UploadBtn = document.getElementById(Bid);
if (UploadBtn){UploadBtn.onclick = function() {BtHide(Did);BtHide("popBox");BtHide("popIframe");return false;}}
}
</script>
<!--遮罩 end -->
</head>
<body>
<div class="main">
<select>
<option>ie6下不顯示</option>
</select>
</div>
<div><input type="button" id="open_1" value="確認(rèn)"></div>
<!-- 遮罩層 begin -->
<div id="tinybox_1">
<h4>感謝您的光臨，定制需求單送出后，我們將安排專人在24小時內(nèi)為您服務(wù)！</h4>
<a href="#" id="close_1">關(guān)閉</a>
</div>
<script type="text/javascript">
BtPopShow("open_1","tinybox_1");
BtPopHide("close_1","tinybox_1")
</script>
<!-- 遮罩層 end -->
</body>
</html>

相關(guān)文章

  • 遮罩層 + Iframe實現(xiàn)界面自動顯示的示例代碼

    這篇文章主要介紹了遮罩層 + Iframe實現(xiàn)界面自動顯示的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小
    2020-04-26

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

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

  • 彈出一個遮罩層有正在加載效果的文字

    彈出一個遮罩層有正在加載效果的文字，在很多場景都有看到過，下面為大家介紹下具體的實現(xiàn)
    2014-04-17

  • div背景半透明，覆蓋整個可視區(qū)域的遮罩層效果

    背景半透明，覆蓋整個可視區(qū)域的遮罩層效果在工作中經(jīng)常會遇到，這篇文章主要介紹了當(dāng)內(nèi)容超過一屏?xí)r如何做到多瀏覽器的兼容性。 下面我們通過一個簡單的例子看看如何實現(xiàn)
    2011-12-08

  • div背景半透明 覆蓋整個可視區(qū)域的遮罩層效果

    背景半透明，覆蓋整個可視區(qū)域的遮罩層效果在工作中經(jīng)常會遇到，這篇文章主要介紹了當(dāng)內(nèi)容超過一屏?xí)r如何做到多瀏覽器的兼容性。 下面我們通過一個簡單的例子看看如何實現(xiàn)
    2011-10-30

  • Html5頁面點擊遮罩層背景關(guān)閉遮罩層

    這篇文章主要介紹了Html5頁面點擊遮罩層背景關(guān)閉遮罩層，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起
    2020-11-30

最新評論