 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> New Document </title> 
<script type="text/javascript" src="../jquery-1.7.2.js"></script> 
<script type="text/javascript"> 
//創(chuàng)建一個(gè)彈出層,title 標(biāo)題，width 寬度，height 高度，content 內(nèi)容，url 如果url不為空時(shí)則覆蓋content加載url頁(yè)面中的內(nèi)容 
function CreatePopLayerDiv(title,width,height,content,url){ 
var titles = title || "標(biāo)題"; 
var Iheight=$(window).height(); 
var Iwidth =$(window).width(); 
var heights = height || 300; 
var widths = width || 500; 
var Oheight= (Iheight -heights) / 2; 
var Owidth = (Iwidth - widths) /2; 
var contents = content || "內(nèi)容"; 
var div = "<div id='InDiv' style='width:"+Iwidth+"px;height:"+Iheight+"px;background-color:#888;position:absolute;z-index:10000;top:0;left:0;opacity:0.7;'><div id='offDiv' style='width:"+widths+"px;height:"+heights+"px;left:"+Owidth+"px;top:"+Oheight+"px;background-color:white;position:absolute;z-index:10001;'><h4 id='HTitle' style='margin:0px;padding:3px;background:#336699;opacity:0.9;border:1px solid ##336699;height:20px;line-height:20px;font:12px Verdana, Geneva, Arial, Helvetica, sans-serif;color:white;cursor:pointer;text-align:left;'>"+titles+"<a id='AClose' onclick='btnCloses()' style='float:right;'>關(guān)閉</a></h4><div id='Content'>"+contents+"</div></div></div>"; 
$(document.body).append(div); 
if(url != ""){ 
$("#Content").load(url); 
} 
} 
//移除彈出層 
function RemoveDiv(){ 
$("#AClose").remove(); 
$("#HTitle").remove(); 
$("#offDiv").remove(); 
$("#InDiv").remove(); 
} 
$(function(){ 
$("#btnTCC").click(function(){ 
CreatePopLayerDiv("閃耀的瞬間",600,400,"彈出層","table偶數(shù)行變色.html"); 
}); 
}) 
function btnCloses(){ 
RemoveDiv(); 
} 
</script> 
</head> 
<body> 
<input type="button" id="btnTCC" value="彈出層" /> 
</body> 
</html> 

您可能感興趣的文章:

彈出層

相關(guān)文章

原生javascript實(shí)現(xiàn)Tab選項(xiàng)卡切換功能
本文主要介紹了使用原生javascript實(shí)現(xiàn)Tab選項(xiàng)卡切換的功能，雖然jQuery有很多類(lèi)似的插件，單jQuery庫(kù)著實(shí)有點(diǎn)龐大，這種小功能還是直接用javascript來(lái)做就好了。
2015-01-01
JS生成不重復(fù)的隨機(jī)數(shù)組的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JS生成不重復(fù)的隨機(jī)數(shù)組的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
深入理解typescript中的infer關(guān)鍵字的使用
infer 這個(gè)關(guān)鍵字，整理記錄一下，避免后面忘記了。具有一定的參考價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-06-06
配置Grunt的Task時(shí)通配符支持和動(dòng)態(tài)生成文件名問(wèn)題
這篇文章主要介紹了配置Grunt的Task時(shí)通配符支持和動(dòng)態(tài)生成文件名問(wèn)題,需要的朋友可以參考下
2015-09-09
JavaScript常用驗(yàn)證函數(shù)實(shí)例匯總
這篇文章主要介紹了JavaScript常用驗(yàn)證函數(shù),實(shí)例匯總了如字符串驗(yàn)證、表單驗(yàn)證及js常用特效等諸多js常用驗(yàn)證函數(shù)及相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2014-11-11
帶你領(lǐng)略O(shè)bject.assign()方法的操作方式
這篇文章主要介紹了帶你領(lǐng)略O(shè)bject.assign()方法的操作方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
圖片無(wú)縫滾動(dòng)代碼(向左/向下/向上)
想必大家都注意到marquee的不循環(huán)滾動(dòng),所以出現(xiàn)了很多替代腳本，接下來(lái)為大家詳細(xì)介紹下：向左滾動(dòng)/圖片左無(wú)縫滾動(dòng)/向下滾動(dòng)/圖片下無(wú)縫滾動(dòng)/向上滾動(dòng)的實(shí)現(xiàn)
2013-04-04
JS JSON對(duì)象轉(zhuǎn)為字符串的簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要介紹了JS中JSON對(duì)象轉(zhuǎn)為字符串的簡(jiǎn)單實(shí)現(xiàn)方法。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
jquery動(dòng)態(tài)遍歷Json對(duì)象的屬性和值的方法
下面小編就為大家?guī)?lái)一篇jquery動(dòng)態(tài)遍歷Json對(duì)象的屬性和值的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
js跨域資源共享基礎(chǔ)篇
這篇文章主要為大家詳細(xì)介紹了javascript跨域資源共享的相關(guān)資料，感興趣的朋友可以參考一下
2016-07-07