[转]JS弹出div和关闭

JavaScript弹窗提示框实现

最新推荐文章于 2022-12-01 17:25:18 发布

最新推荐文章于 2022-12-01 17:25:18 发布 · 184 阅读

文章标签：

#php

本文介绍了一种使用JavaScript创建动态弹出提示框的方法。该提示框可以根据鼠标的当前位置显示，并且包含输入密码的表单及确认和重置按钮。通过调整div的位置和样式，使得提示框能够适应不同的屏幕尺寸。

//--弹出div
var parameter;
var type;
function alert_div(type,parameter)
{
//获得鼠标当前X,Y坐标 var x,y; if(!document.all) { x=pageX; y=pageY; }else{ x=document.body.scrollLeft+event.clientX; //鼠标X轴的值 y=document.body.scrollTop+event.clientY; //鼠标Y轴的值 }

//window.scrollTo(100,500);//竖向滚动条位置

var sH = document.body.scrollHeight; //窗口的高度 var sW = document.body.scrollWidth; //窗口的宽度 var width=260 , height=90; //设置div的大小

if((x + width) >= sW) //当鼠标点击时的x坐标的值加上div的宽度大于窗口的宽度 { x = x - width; }

var left=x , top=y ; //设置div的位置

var str=""; // 整个div的大小和位子 str+="<div id='div1' style='z-index:1;background-color:white;position:absolute;border:2px solid slategray;left:"+left+";top:"+top+";width:"+width+";height:"+height+";'>"; //--begin灰色top str+="<div style='padding-bottom:2px;background-color:slategray;width:100%;height:16px;color:white;'>"; // 灰色div的设置 str+=" <div style='float:left;height:16px;overflow:hidden;margin:0px;padding:4px 0px 0px 5px;width:235;'>温馨提示</div>"; // 灰色div右侧的按钮 //str+=" 0"; str+=" r"; str+="</div>"; //--end //--begin白色div str+="<div style=' margin:10px 5px 10px 10px;word-break:break-all;'>"; // 白色div中的信息 str+="<table cellpadding='0' cellspacing='1' border='0' class='border' align=left><form method='post' name='form_pwd' action='other.php?type="+type+"&_num="+parameter+"'><tr class='tdbg' valign='top'><td align='left'>请输入密码：<input name='pwd' type='password' size='20' maxlength='255' style='height:18px;'></td></tr><tr class='tdbg'><td colspan='2' align='center' valign='foot'><input type='submit' name='sub_pwd' value=' 确认 '>&nbsp;&nbsp;<input type='reset' value=' 重置 '></td></tr></form></table>"; str+="</div>"; //--end str+="</div>"; //document.write(str); document.body.insertAdjacentHTML("afterBegin",str); } //--关闭div function hide() { document.getElementById( "div1").style.display = "none"; }