利用js對象彈出一個層
更新時間：2008年03月26日 21:43:03 作者：
用js實現(xiàn)彈出層效果，一般用于代替alert
復制代碼 代碼如下:
<!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=gb2312" />
<title>腳本之家-彈出一個層</title>
<script language="javascript">
function cmsgbox(vtitle,vwidth,vhight,vtop,vleft)
{
this.title=vtitle;
this.width=vwidth;
this.height=vhight;
this.top=vtop;
this.left=vleft;
this.id=0;
}
cmsgbox.prototype.showdiv=function()
{
var str="";
str+="<div id='div1' style='z-index:1;background-color:white;position:absolute;border:2px solid slategray;left:"+this.vleft+"px;top:"+this.vtop+"px;width:"+this.width+"px;'>";
str+="<div style='padding-bottom:2px;background-color:slategray;width:100%;height:16px;color:white;' >";
str+=" <div style='float:left;height:16px;overflow:hidden;margin:0px;padding:4px 0px 0px 5px;width:"+(parseInt(this.width)-24*2-5)+"px;'>"+this.title+"</div>";
str+=" <span style='width:14px;font-family:webdings;cursor:hand;'>0</span>";
str+=" <span style='width:14px;font-family:webdings;cursor:hand;' onclick='cmsgbox.closediv(this);'>r</span>";
str+="</div>";
str+="<div style=' margin:10px 5px 10px 10px;word-break:break-all;'>";
str+="xxx";
str+="</div>";
str+="</div>";
//document.write(str);
document.body.insertAdjacentHTML("beforeEnd",str);
}
/////////////////////窗口顯示//////////////////////////////
function show()
{
var box=new cmsgbox('小家伙呀',400,300);
box.showdiv();
}
</script>
</head>
<style>
body{
font-size:12px;
}
</style>
<body>
<p onclick="show();">彈了一個層</p>
</body>
</html>
相關(guān)文章
分享十三個最佳JavaScript數(shù)據(jù)網(wǎng)格庫
數(shù)據(jù)網(wǎng)格可以幫助解決在 HTML 表格上對帶有過濾、分頁、排序、搜索以及內(nèi)聯(lián)編輯這些功能特性的大量數(shù)據(jù)集的處理問題,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)九宮格移動拼圖游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
"好玩的放大鏡效果" 的另一種實現(xiàn)方法...2006-11-11
js 鼠標、鍵盤的幾個事件的例子2008-07-07
這篇文章主要給大家介紹了關(guān)于如何利用d3.js制作連線動畫圖與編輯器的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用d3.js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-09-09
這篇文章主要為大家詳細介紹了移動端觸摸滑動插件swiper的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了js實現(xiàn)頂部可折疊的菜單工具欄效果,可實現(xiàn)鼠標滑過菜單工具欄出現(xiàn)折疊與展開效果,涉及javascript鼠標事件及樣式的操作技巧,需要的朋友可以參考下2015-05-05
JavaScript定義簡單的頁面復選框?qū)崿F(xiàn)全選操作
本文主要介紹了JavaScript定義簡單的頁面復選框?qū)崿F(xiàn)全選操作，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
JavaScript圣杯布局與雙飛翼布局實現(xiàn)案例詳解
這篇文章主要介紹了JavaScript圣杯布局與雙飛翼布局實現(xiàn)案例，這是前端面試中需要掌握的知識點，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
上傳圖片對圖片進行一下預(yù)覽，可以了解圖片上傳后大概會是什么樣子，此功能用js實現(xiàn)，然后在fileupload控件的change事件中調(diào)用，這樣當用fileupload選擇完圖片以后，圖片就會自動顯示出來了。功能很簡單，卻很實用。2013-03-03