js弹窗代码示例(有注释)

发布时间:2020-05-06编辑:脚本学堂
分享一个js弹窗代码,js弹出层代码,鼠标按下位置相对对象位置,当鼠标释放时同时释放拖动对象,实现js弹窗代码效果,有需要的朋友参考下。

例子,js弹窗代码效果。弹出层代码
 

复制代码 代码示例:
<script. language="javascript">
var currentMoveObj = null; //当前拖动对象
var relLeft;//鼠标按下位置相对对象位置
var relTop;
function f_mdown(obj)
{
currentMoveObj = obj;//当对象被按下时,记录该对象
currentMoveObj.style.position = "absolute";
relLeft = event.x - currentMoveObj.offsetLeft;
relTop = event.y - currentMoveObj.offsetTop; 
}
window.document.onmouseup = function()
{
currentMoveObj = null;//当鼠标释放时同时释放拖动对象
}
function f_move(obj)
{
if(currentMoveObj != null)
{
currentMoveObj.style.pixelLeft=event.x-relLeft;
currentMoveObj.style.pixelTop=event.y-relTop;
}
}
function fnPopup()
{
document.getElementById('popup').style.display='block';
// 只有在第一次显示时加载页面
//if(window.frames[0].location.href=='about:blank')
//window.frames[0].location.href="Dialog.aspx";
}
function fnCloseWin()
{
//parent.document.getElementById('uinput').value=document.getElementById('uinput').value;
parent.document.getElementById('popup').style.display='none';  
 //   alert(document.all('chb').value)
}
</script>
脚本学堂 www.jb200.com 整理)
<input type="button" value="显示" nclick="javascript.:fnPopup();" />
<input type="button" value="隐藏" nclick="javascript.:fnCloseWin();" />
<br />
sdfasdfssdfsadf fsdfsdfsaf
<div id="popup" style="border: 1px solid #606060; width: 320px; height: 240px; display: none;
position: absolute;" nselectstart="return false">
<p align="right" style="height: 20px; background-color: #999999; cursor:move;" nmousedown="f_mdown(popup)"
nmousemove="f_move(popup)">
<a href="#" nclick="javascript.:fnCloseWin();" style="color:Red">关闭</a></p>
<input type="checkbox" id="chb" value="1" />
</div>