弹出层效果

<html>

<body>

 <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>


 <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;" onselectstart="return false">
        <p align="right" style="height: 20px; background-color: #999999; cursor:move;" οnmοusedοwn="f_mdown(popup)"
            οnmοusemοve="f_move(popup)">
            <a href="#" οnclick="javascript:fnCloseWin();" style="color:Red">关闭</a></p>
        <input type="checkbox" id="chb" value="1" />
    </div>
    dsfsafdsf

</body>

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值