遮罩层提示框，可拖动标题栏（兼容FF）

来源：互联网发布：淘宝评价怎么写50字编辑：程序博客网时间：2024/06/05 19:32

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
    function showFilter() {
        document.getElementById('filter').style.display = 'inline';
        document.getElementById('promptbox').style.display = 'inline';
    }
    function hidFilter() {
        document.getElementById('filter').style.display = 'none';
        document.getElementById('promptbox').style.display = 'none';
    }

    function m(o, e) {
        e = e ? e : window.event;
        Mouse_Obj = o;
   var obj=document.getElementById(Mouse_Obj);
   _x = obj.offsetLeft + 190; //这里的190是下面 margin-left:-190px 的偏移值
   _y = obj.offsetTop + 80; //这里的80是下面 margin-top:-80px; 的偏移值
   _x += -e.clientX;
   _y += -e.clientY;
    }
</script>

#filter{display:none; position:absolute;bottom:0px;right:0px; left:0px; top:0px; z-index:1000;background: #000000;filter:Alpha(opacity=30);opacity:0.3}
#promptbox{display:none; left:50%;top:50%;margin-left:-190px;margin-top:-80px; width: 380px; z-index: 1001;
        position: absolute; text-align: center; background-color: White; border:solid 1px #000; padding:0 0 10px}
.lefttit{ margin-left:20px; width:60px}
</style>
</head>
<body>
<a onclick="showFilter();" href="#">上传图片</a>
    <div id="filter">
    </div>
    <div id="promptbox" >
        <div onmousedown="m('promptbox',event)" style="height: 24px; margin-bottom:20px; background-color: Blue; ">
            <span onclick="hidFilter()" style="float: right; height: 24px; line-height:24px; background-color: Red;
                font-size: 20px; font-weight: bolder; color: White; cursor:pointer;">×</span></div>
                <div style=" text-align:left">
                <span class="lefttit">
        本地文件：</span><input type="file" style="width:280px" size="30" runat="server" id="oFile" /></div>
          <div style="margin:20px 0; text-align:left">
          <span class="lefttit">
        图片标题：</span><input type="text" runat="server" id="txtNewImgName" size="40" /></div><div style="text-align: center;">
            <input type="button" onclick="hidFilter()" value="取消" />    
            <input id="Button1" type="button" onclick="if(document.getElementById('oFile').value==''){alert('请选择本地文件！');return false;}if(document.getElementById('txtNewImgName').value==''){alert('请输入图片标题');return false;}"
                value="上传" runat="server" onserverclick="Upfile_Click" /></div>
    </div>

</body></html>

转载请注明出处：http://blog.csdn.net/dasihg/article/details/6796755