[转]JS弹出div和关闭

本文介绍了一个使用JavaScript实现的动态弹出窗口功能。通过获取鼠标位置并据此定位弹窗,实现了带有密码输入框的提示窗口。该弹窗包含一个可以关闭的按钮,并能根据浏览器窗口大小自动调整位置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//--弹出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+=" <span style='width:14px;font-family:webdings;cursor:hand;'>0</span>"; 
 str+=" <span style='width:14px;font-family:webdings;cursor:hand;' onclick='hide()'>r</span>";
 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'><strong>请输入密码:</strong><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";
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值