拖动层+滤镜

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
   .ui-widget-overlay_ {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        background: url("images/ui-bg_flat_0_aaaaaa_40x100.png") repeat-x scroll 50% 50% #AAAAAA;
        opacity: 0.3;
        z-index: 1001;
        filter: Alpha(Opacity=30); /*{opacityOverlay}*/
    }
</style>
 </head>

 <body>
    <input type="button" id="btnUpload"   onclick='divDialog()' value="弹出层" />

 <%--遮盖层--%>
 <div id="divZ" class="ui-widget-overlay_" style="display: none"></div>
<%--拖动层--%>
<div id="saveDialog" style="display: none; position: absolute; z-index: 1003; border: solid 1px #AABCCF; left: 200px; top: 100px; background-color: white;width:200px">
    <div id="divMove" style="background-color: #AAAAAA; width: 100%; height: 50px; cursor: move">单机按住标题拖动</div>
    <div id="fileQueue"><table><tr><td>内容区展现区</td></tr></table> </div>
</div>
 </body>
</html>

 <%--拖动JS--%>
<script type="text/javascript">
    var pic, mx, my;
    var tok = document.getElementById("divMove");
    tok.onmousedown = function (e) {
        pic = document.getElementById("saveDialog");
        pic.dx = mx - pic.offsetLeft;
        pic.dy = my - pic.offsetTop;
        return false;
    };
    tok.onmouseup = function ()
    { pic = null };
    tok.ondragstart = function () {
        return false;
    };
    document.onmousemove = function (e) {
        var e = e || event;
        var bd = document.body;
        mx = e.pageX || e.clientX + bd.scrollLeft - bd.clientLeft;
        my = e.pageY || e.clientY + bd.scrollTop - bd.clientTop;
        if (pic) with (pic.style) {
            left = mx - pic.dx + "px";
            top = my - pic.dy + "px";
        };
    };
</script>


 <%--弹出层JS--%>
<script type='text/javascript'>
function divDialog(){
document.getElementById('saveDialog').style.display='block';
document.getElementById('divZ').style.display='block';
}
</script>
posted on 2013-06-07 17:10 朝着阅读(179) 评论(0) 收藏举报