Javascript实现点击按钮,弹出一个关闭的层窗口和页面背景变成灰色
点击这里按钮,弹出一个封闭的图层窗口,灰色背景与网页在QQ网站上,经常看到QQ日志效果,这非常类似于基于javascript的代码段的使用,这取决于你的情况,这有时是用CSS来完成的。
一层被弹出,页面是灰色的。
功能alertwin(标题、味精、W、H){
无功titleheight =23px ; / /窗口标题的高度
VaR BorderColor =# 336699 ; / /提示边框颜色
无功titlecolor =# ffffff ; / /窗口标题颜色
无功titlebgcolor =# 336699 ; / /窗口标题的背景颜色
VAR背景颜色=# ffffff ; / /背景色提示内容
VaR的Iwidth = document.documentelement.clientwidth;
VaR的Iheight = document.documentelement.clientheight;
VaR BBJ = document.createelement(div);
bbj.style.csstext = 的位置:绝对;左:0px;顶部:0px;宽度:+ Iwidth +PX;高度:+数学。马克斯(document.body.clientheight,的Iheight)++数学。最大;
document.body.appendchild(BBJ);
无功msbj = document.createelement(div);
msbj.style.csstext = 的位置:绝对字体:11px歌曲;;顶部:+(iheight-h)/ 2 +PX;左:+(iwidth-w)/ 2 +PX;宽度:+ W +PX;高度:+ H +PX;文本对齐:中心边界:1px;固体+ BorderColor +;背景色;填充:1px;线高度:22px bgcolor +;Z指数:102;;
document.body.appendchild(msbj);
无功表= document.createelement(表);
msbj.appendchild(表);
table.style.csstext =保证金:0px;border: 0px;padding: 0px;;
table.cellspacing = 0;
VaR TR = table.insertrow(- 1);
标题= tr.insertcell VaR(1);
titlebar.style.csstext =宽度:100%;高度:+ titleheight +PX;文本对齐:左;填充:3px;保证金:0px;字体:黑体13px宋体;颜色:13px ;++ + +;;;+;
titlebar.style.paddingleft =10px ;
titlebar.innerhtml =标题;
VaR Movex = 0;
无功movey = 0;
无功movetop = 0;
VaR向左移动= 0;
var =假;
无功docmousemoveevent = document.onmousemove;
无功docmouseupevent = document.onmouseup;
titlebar.onmousedown =函数(){
var = GetEvent(EVT);
可移动的=真实的;
Movex = evt.clientx;
movey = evt.clienty;
movetop = parseInt(msbj。风格。顶部);
向左移动= parseInt(msbj。风格。左);
document.onmousemove =函数(){
如果(可移动){
var = GetEvent(EVT);
var x =向左移动+ evt.clientx -继续前进;
var y = movetop + evt.clienty - movey;
如果(x > 0(X + 0 W(Y + H <0的Iheight)){
msbj.style.left = x +PX;
msbj.style.top = y +PX;
}
}
};
document.onmouseup =函数(){
如果(可移动){
document.onmousemove = docmousemoveevent;
document.onmouseup = docmouseupevent;
可移动的=错误的;
Movex = 0;
movey = 0;
movetop = 0;
向左移动= 0;
}
};
}
无功closebtn = tr.insertcell(- 1);
closebtn.style.csstext =鼠标指针;填充:2px;背景颜色:+ titlebgcolor;
closebtn.innerhtml =X;
closebtn.onclick =函数(){
document.body.removechild(BBJ);
document.body.removechild(msbj);
}
VaR MsgBox = table.insertrow(- 1),InsertCell(1);
msgbox.style.csstext =字体:10pt歌体;;
msgbox.colspan = 2;
msgbox.innerhtml =味精;
获取事件对象,以便与IE和Firefox兼容
功能GetEvent(){
返回window.event参数。被叫。来电。论点{ 0 } | |;
}
}
<输入类型按钮
onclick= alertwin(点击关闭层的窗口,Gray
希望本文能对大家的javascript程序设计有所帮助。