您的位置：首页 > 其它

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

2011-09-21 12:22 134 查看

<!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';

}

var Mouse_Obj = "none", _x, _y;

document.onmousemove=function(e) {

if (Mouse_Obj != "none") {

e = e ? e : window.event;

var obj = document.getElementById(Mouse_Obj);

obj.style.left = _x + e.clientX + "px";

obj.style.top = _y + e.clientY + "px";

event.returnValue = false;

}

}

document.onmouseup= function() {

Mouse_Obj = "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>

<style type="text/css">

body

{

font-size: 9pt;

font-family: 宋体;

}

#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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航