原生js的彈出層且其內的窗口居中
更新時間：2014年05月14日 17:16:37 作者：
彈出層內含窗口且居中，在本例使用原生js來實現(xiàn)，與網上的有所不一樣，大家不妨參考下
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
*
{
padding:0px;
margin:0px;
}
#Idiv
{
width:900px;
height:auto;
position:absolute;
z-index:1000;
border:2px solid #ffffff;
background:#ffffff;
}
</style>
</HEAD>
<body>
<div id="Idiv" style="display:none;">
<a href="javascript:void(0)" onclick="closeDiv()">點擊關閉層</a>
<br/>document.documentElement 的區(qū)別<br/>document.documentElement 的區(qū)別
</div>
<div><a href="javascript:void(0)" id="show" onclick="show()">點擊打開彈出層！</div>
</body>
<script langue="javascript">
function show()
{
var Idiv=document.getElementById("Idiv");
Idiv.style.display="block";
//以下部分要將彈出層居中顯示
Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/2+document.documentElement.scrollLeft+"px";
//alert(document.body.scrollTop)
var aa_scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
Idiv.style.top=(document.documentElement.clientHeight-Idiv.clientHeight)/2+aa_scrollTop+"px";
//此處出現(xiàn)問題，彈出層左右居中，但是高度卻不居中，顯示在上部分，導致一 //部分不可見,于是暫時在下面添加margin-top
//以下部分使整個頁面至灰不可點擊
var procbg = document.createElement("div"); //首先創(chuàng)建一個div
procbg.setAttribute("id","mybg"); //定義該div的id
procbg.style.background ="#000000";
procbg.style.width ="100%";
procbg.style.height ="100%";
procbg.style.position ="fixed";
procbg.style.top ="0";
procbg.style.left ="0";
procbg.style.zIndex ="500";
procbg.style.opacity ="0.6";
procbg.style.filter ="Alpha(opacity=70)";
//取消滾動條
document.body.appendChild(procbg);
document.body.style.overflow ="auto";
//以下部分實現(xiàn)彈出層的拖拽效果(如果想要彈出層內的div移動,把以下注銷去掉即可)
/*
var posX;
var posY;
Idiv.onmousedown=function(e)
{
if(!e) e = window.event; //IE
posX = e.clientX - parseInt(Idiv.style.left);
posY = e.clientY - parseInt(Idiv.style.top);
document.onmousemove = mousemove;
}
document.onmouseup =function()
{
document.onmousemove =null;
}
function mousemove(ev)
{
if(ev==null) ev = window.event;//IE
Idiv.style.left = (ev.clientX - posX) +"px";
Idiv.style.top = (ev.clientY - posY) +"px";
}*/
}
function closeDiv() //關閉彈出層
{
var Idiv=document.getElementById("Idiv");
var mybg = document.getElementById("mybg");
document.body.removeChild(mybg);
Idiv.style.display="none";
document.body.style.overflow ="auto";//恢復頁面滾動條
//document.getElementById("mybg").style.display="none";
}
</script>
</HTML>
//改變上面的彈出層，做自己的一個loading加載的功能。判斷頁面是否加載完畢，完畢后隱藏loading.gif
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body onload="subSomething()">
</body>
<script type="text/ecmascript">
function show(addressImg, img_w, img_h) {
//得到頁面高度
var h = (document.documentElement.scrollHeight > document.documentElement.clientHeight) ? document.documentElement.scrollHeight : document.documentElement.clientHeight;
//得到頁面寬度
var w = (document.documentElement.scrollWidth > document.documentElement.clientWidth) ? document.documentElement.scrollWidth : document.documentElement.scrollWidth;
var procbg = document.createElement("div"); //首先創(chuàng)建一個div
procbg.setAttribute("id", "mybg"); //定義該div的id
procbg.style.background = "#555";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "fixed";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zIndex = "500";
procbg.style.opacity = "0.6";
procbg.style.filter = "Alpha(opacity=70)";
//取消滾動條
document.body.appendChild(procbg);
document.body.style.overflow = "auto";
var pimg = document.createElement("img"); //創(chuàng)建一個img
pimg.setAttribute("id", "bg_img"); //定義該div的id
pimg.setAttribute("src", addressImg); //定義該div的id
var img_w = (w - img_w) / 2;
var img_h = (h - img_h) / 2;
pimg.style.top = img_h + "px";
pimg.style.left = img_w + "px";
pimg.style.position = "fixed";
pimg.style.opacity = "0.9";
document.getElementById("mybg").appendChild(pimg);
}
function closeDiv() //關閉彈出層
{
var mybg = document.getElementById("mybg");
document.body.removeChild(mybg);
document.body.style.overflow = "auto";//恢復頁面滾動條
//document.getElementById("mybg").style.display="none";
}
show('loading/loading3.gif', '100', '100');
document.onreadystatechange = subSomething;//當頁面加載狀態(tài)改變的時候執(zhí)行這個方法.
function subSomething() {
if (document.readyState == "complete") { //當頁面加載狀態(tài)為完全結束時進入
closeDiv();
}
}
</script>
</html>
相關文章
JavaScript實現(xiàn)外溢動態(tài)愛心的效果的示例代碼
這篇文章主要為大家介紹了如何利用JavaScript制作出簡單的外溢動態(tài)愛心的效果，文中的示例代碼講解詳細，感興趣的小伙伴快跟隨小編一起動手試一試2022-03-03
這篇文章主要介紹了JavaScript?中的數(shù)據類型Number，Number?類型使用?IEEE?754?格式表示整數(shù)和浮點值，下文相關詳細資料介紹，需要的小伙伴可以參考一下2022-04-04
JavaScript實現(xiàn)列出數(shù)組中最長的連續(xù)數(shù)
這篇文章主要介紹了JavaScript實現(xiàn)列出數(shù)組中最長的連續(xù)數(shù)的方法及使用,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細介紹了JS設計模式之單例模式的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了js實現(xiàn)Select列表內容自動滾動效果的方法,涉及javascript簡單遞歸調用遍歷select及時間函數(shù)的相關使用技巧,需要的朋友可以參考下2015-08-08
JavaScript使用Promise實現(xiàn)分批處理接口請求
當我們在實際項目中遇到需要批量發(fā)起上百條接口請求怎么辦呢,本文就來為大家介紹一下JavaScript如何使用Promise實現(xiàn)分批處理接口請求,需要的小伙伴可以參考一下2023-11-11
當新聞較多，并且空前有限的時候，使用滾動是一個不錯的選擇，本章節(jié)就通過代碼實例介紹一下如何實現(xiàn)此效果，對無縫向上滾動實例代碼感興趣的朋友一起學習吧2016-01-01
這篇文章主要介紹了如何使用JavaScript檢測空閑的瀏覽器選項卡，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
javascript實現(xiàn)帶下拉子菜單的導航菜單效果
這篇文章主要介紹了javascript實現(xiàn)帶下拉子菜單的導航菜單效果的方法,涉及javascript操作頁面元素與樣式的相關技巧,需要的朋友可以參考下2015-05-05
今天小編就為大家分享一篇layer 關閉指定彈出層的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09