javascript彈出一個(gè)層并增加一個(gè)覆蓋層
更新時(shí)間：2008年10月10日 23:14:41 作者：
彈出一個(gè)層的js代碼，比較不錯(cuò)
復(fù)制代碼 代碼如下:
<!--內(nèi)容層-->
<div id="ShopConfirmLayer" style="position:absolute;top:300px;left:100px;z-index:900;border:1px red solid;width:500px;display:none;">
<input name="button1" value="關(guān)閉" type="button" onclick="CloseShopConfirm()"/>
</div>
<!--覆蓋層-->
<div id="webBgLayer" style="position:absolute;top:0px;left:0px;z-index:899;background-color:#ccc;height:100%;width:100%;display:none;-moz-opacity:0.5;filter:alpha(opacity=50);"></div>
<script type="text/javascript">
function ShopConfirm(str){
var ShopConfirmLayer=document.getElementById("ShopConfirmLayer");
var webBgLayer=document.getElementById("webBgLayer");
ShopConfirmLayer.innerHTML=str;
ShopConfirmLayer.style.display="";
ShopConfirmLayer.style.left=parseInt((document.documentElement.scrollWidth-ShopConfirmLayer.offsetWidth)/2)+document.documentElement.scrollLeft+"px";
ShopConfirmLayer.style.top=Math.abs(parseInt((document.documentElement.clientHeight-ShopConfirmLayer.offsetHeight)/2))+document.documentElement.scrollTop+"px";
webBgLayer.style.display="";
webBgLayer.style.height=document.documentElement.scrollHeight+"px";
}
function CloseShopConfirm(){
var ShopConfirmLayer=document.getElementById("ShopConfirmLayer");
var webBgLayer=document.getElementById("webBgLayer");
ShopConfirmLayer.style.display="none";
webBgLayer.style.display="none";
}
</script>
注意上面的代碼頭部DTD應(yīng)該是這樣：
復(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">
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
這篇文章主要介紹了JavaScript變量Dom對(duì)象的所有屬性,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了ES6中字符串string常用的新增方法,結(jié)合實(shí)例形式總結(jié)分析了ES6中字符串string常用的新增方法功能與使用技巧,需要的朋友可以參考下2017-11-11
uniapp頁面?zhèn)鲄⒌娜N方式實(shí)例總結(jié)
在進(jìn)行頁面的跳轉(zhuǎn)的時(shí)候,往往需要我們將一些參數(shù)攜帶著傳遞過去這里的class樣式,下面這篇文章主要給大家介紹了關(guān)于uniapp頁面?zhèn)鲄⒌娜N方式,需要的朋友可以參考下2022-11-11
前后端分離的項(xiàng)目中,前端工作人員會(huì)要求后端返回指定格式的JSON數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于如何根據(jù)后端返回的url下載json文件的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了JsRender實(shí)用入門實(shí)例,包含了tag else使用、循環(huán)嵌套訪問父級(jí)數(shù)據(jù)等知識(shí)點(diǎn),并提供了完整的實(shí)例下載,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-10-10
JavaScript實(shí)現(xiàn)帶音效的煙花特效
這篇文章主要為大家介紹了通過JavaScript實(shí)現(xiàn)的帶音效的煙花特效，文中的示例代碼簡潔易懂，對(duì)我們學(xué)習(xí)JavaScript有一定的幫助，感興趣的可以了解一下2021-12-12
JS實(shí)現(xiàn)顏色的10進(jìn)制轉(zhuǎn)化成rgba格式的方法
這篇文章主要介紹了JS實(shí)現(xiàn)顏色的10進(jìn)制轉(zhuǎn)化成rgba格式的方法,涉及javascript針對(duì)顏色數(shù)值轉(zhuǎn)換的相關(guān)運(yùn)算操作技巧,需要的朋友可以參考下2017-09-09
js實(shí)現(xiàn)百度聯(lián)盟中一款不錯(cuò)的圖片切換效果完整實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)百度聯(lián)盟中一款不錯(cuò)的圖片切換效果的方法,以完整實(shí)例形式分析了javascript操作圖片切換的技巧,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了es6和commonJs的區(qū)別,ES6的模塊化規(guī)范更加先進(jìn)、靈活，能夠適應(yīng)更多的應(yīng)用場(chǎng)景，而CommonJS則更加簡單、易用，廣泛應(yīng)用于Node.js開發(fā)中，在實(shí)際應(yīng)用中，可以根據(jù)具體情況選擇使用不同的模塊化方案，需要的朋友可以參考下2023-03-03
這是前端面試的經(jīng)典題型，要去找工作的小伙伴看看還是有幫助的,需要的朋友可以參考下2017-06-06