2007年11月30日 星期五 上午 11:32

其实这个效果是很常见的,很多现在的网站上都有这个效果,它的主要部分都是用JS实现的,昨天注意看了一下,原理说通了还是很简单的,不过我一开始什么都不知道.所以做起来很麻烦..换了很多的方案.,.

1)首先是要弹出一个层来,这个我想很简单.一开始.把这个层隐藏了,在方法中显示就行了,

2)然后是要禁用整个页面,这里我走了很多的弯路.,其实它也是一个层,不过是加了点小东西在里面,

3)然后是弹出的这个层要可以拖动,

先在页面上布几个层,分别如下;

<div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
            z-index: 2; left: 0px; display: none;">

这个层是蒙住页面的层,filter: alpha(opacity=60); 应该就是禁用那个效果的滤镜吧,

<div>
                <a οnclick="show()">弹出</a>
            </div>

<div id="divTest" style="position: absolute; z-index: 3; width: 540; height: 170px;
            background-color: Yellow; display: none; top: 100px; left: 100px;">
            <div id="dd" style="background-color: Red; width: 365px; height: 20px; float: left;"
                οnmοusedοwn="down()">
            </div>
            <div style="background-color: Red; width: 35px; height: 20px;">
                <a οnclick="closes()">关闭</a>
            </div>
        </div>

function show()
    {
        document.all.ly.style.display="block";  
        document.all.ly.style.width=document.body.clientWidth+20;
        document.all.ly.style.height=document.body.clientHeight+20;
        document.all.divTest.style.display='block';  
        document.getElementById("divTest").style.visibility="visible";
    }
    function closes()
    {
        if(window.confirm("关闭这个层"))
        {
            document.getElementById("divTest").style.visibility="hidden";
            document.all.ly.style.display='none'
        }
    }

当点击"弹出"时,显示divTest层,并把ly这个蒙层显示出来,锁定它,点关闭时,隐藏divTest,同时,隐藏ly.

这样就完成了弹出蒙层的效果了,接着是拖动弹出的层,这里主要调用以下几个方法:

var px=0;
    var py=0;
    var begin=false;
    var topDiv;
    function down()
    {
        begin=true;
        document.getElementById("divTest").style.cursor= "hand";
        event.srcElement.setCapture();  
        px=document.getElementById("divTest").style.pixelLeft - event.x;
        py=document.getElementById("divTest").style.pixelTop - event.y;
    }
    function document.onmousemove()
    {
        if(begin)
        {
            document.getElementById("divTest").style.pixelLeft = px+event.x;
            document.getElementById("divTest").style.pixelTop = py+event.y;
        }
      
    }
    function document.onmouseup()
    {
        begin=false;
        document.getElementById("divTest").style.cursor= "default";
        event.srcElement.releaseCapture();  
    }

前面的divTest中有οnmοusedοwn="down()" 后面几个方法的写法有点像C#中的匿名方法,第一次使用,还是不错.

下面是整个HTML的代码:

<html>
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div id="divTest" style="position: absolute; z-index: 3; width: 540; height: 170px;
            background-color: Yellow; display: none; top: 100px; left: 100px;">
            <div id="dd" style="background-color: Red; width: 365px; height: 20px; float: left;"
                οnmοusedοwn="down()">
            </div>
            <div style="background-color: Red; width: 35px; height: 20px;">
                <a οnclick="closes()">关闭</a>
            </div>
        </div>
        <div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
            z-index: 2; left: 0px; display: none;">
        </div>
        <div id="main" style="background-color: Azure; height:700px;">
            <div>
                <a οnclick="show()">弹出</a>
            </div>
            <div>
                <input type="button" id="t" οnclick="javascript:alert('ads');" value="Value" />
            </div>
            <br />
        </div>
    </form>

<script type="text/javascript">
    function show()
    {
        document.all.ly.style.display="block";  
        document.all.ly.style.width=document.body.clientWidth+20;
        document.all.ly.style.height=document.body.clientHeight+20;
        document.all.divTest.style.display='block';  
        document.getElementById("divTest").style.visibility="visible";
    }
    function closes()
    {
        if(window.confirm("关闭这个层"))
        {
            document.getElementById("divTest").style.visibility="hidden";
            document.all.ly.style.display='none'
        }
    }
   
   
    var px=0;
    var py=0;
    var begin=false;
    var topDiv;
    function down()
    {
        begin=true;
        document.getElementById("divTest").style.cursor= "hand";
        event.srcElement.setCapture();  
        px=document.getElementById("divTest").style.pixelLeft - event.x;
        py=document.getElementById("divTest").style.pixelTop - event.y;
    }
    function document.onmousemove()
    {
        if(begin)
        {
            document.getElementById("divTest").style.pixelLeft = px+event.x;
            document.getElementById("divTest").style.pixelTop = py+event.y;
        }
      
    }
    function document.onmouseup()
    {
        begin=false;
        document.getElementById("divTest").style.cursor= "default";
        event.srcElement.releaseCapture();  
    }
   
    </script>

</body>
</html>

转载于:https://www.cnblogs.com/pointdeng/archive/2008/02/01/1060970.html

JS弹出可拖动层,并蒙住页面相关推荐

  1. php提交表单关闭弹出层,使用js实现关闭js弹出层的窗口

    本篇文章主要是对使用js实现关闭js弹出层的窗口的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 function toggle() { theObj = document.getE ...

  2. html弹出层全覆盖滚动条,JS弹出层遮罩,隐藏背景页面滚动条细节优化分析

    一.去除滚动条方法 给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性 样式中需要对IE6.7及其它浏览器用hack辨别, ...

  3. html鼠标可拖动窗体,javascript div 弹出可拖动窗口

    javascript div 弹出可拖动窗口 更新时间:2009年02月26日 21:50:37   作者: 创建弹出div窗口. /* * 创建弹出div窗口. 1.接口说明:DivWindow(i ...

  4. php网站自动变暗,如何使用JS弹出DIV并使整个页面背景变暗

    这次给大家带来如何使用JS弹出DIV并使整个页面背景变暗,使用JS弹出DIV并使整个页面背景变暗的注意事项有哪些,下面就是实战案例,一起来看一下. 1.首先写一个遮罩层p,然后再写一个弹窗的p 提示 ...

  5. JS弹出DIV并使整个页面背景变暗功能的实现代码

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...

  6. 原生js 弹出框;弹出效果 定时关闭

    关于原生js的弹出框样式 淡出淡入效果; <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...

  7. three.js 弹出二维图片

    three.js 弹出二维图片 代码 // 创建平面let geometry = new THREE.PlaneGeometry(30, 30);let plan_texture = THREE.Im ...

  8. 点击文字弹出一个DIV层窗口代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  9. html弹窗确认取消公告代码,js 弹出确认与取消对话框的四种方法

    1,js弹出删除确认框 复制代码 代码示例: 弹出窗口 2,js删除前确认 复制代码 代码示例: function delete_confirm(e) { if (event.srcelement.o ...

最新文章

  1. Schema中elementFormDefault=qualified所起的作用
  2. linux的dns查询工具,一款超强的统计DNS查询的工具－－DNSTOP
  3. 神了！React VR使得Oculus Home在Gear VR上运行更快更省电
  4. 【总结整理】JQuery基础学习---DOM篇
  5. Android编程获取网络连接状态(3G/Wifi)及调用网络配置界面
  6. Yii2.0实现微信公众号后台开发
  7. python基础教程：startswith()和endswith()的用法
  8. Meta分析如何进行敏感性分析
  9. css 实现app图标样式_uni-app开发一个小视频应用(一)
  10. k歌的录音伴奏合成技术如何实现_2019年中国在线K歌行业市场现状，在线K歌用户女性占比较高...
  11. java样式是什么_java css样式 css样式的种类 选择器 文本相关样式 背景相关样式 边框 盒子模式...
  12. 湖北网络安全的产业机遇在哪里
  13. 安装caffe时候找不到boost怎么办?(boost的引用问题make can‘t find Boost‘s include files)
  14. 利用Eclipse的TaskList功能进行任务管理
  15. 为什么中国人少有人得到诺贝尔奖呢?
  16. 全球通胀对IT领域的影响
  17. Dalvik smali语法
  18. be going to用法口诀
  19. 记录首次单独完成的js混淆之旅
  20. 暴力破解之验证码绕过

热门文章

  1. Python-cvxopt库的使用(2)(解决QP问题)
  2. SeDuMi教程(1)
  3. 九连环_儿子的玩具—九连环
  4. 桁架机器人运动视频_CUBIC桁架式机器人被广泛应用的原因
  5. oracle临时表经常被锁_5.性能测试 - Oracle体系结构和性能优化简介
  6. java类型之间的转换_JAVA基本数据类型及之间的转换
  7. Python介绍、发展史、安装、变量、注释、输入
  8. java11和13_Java1113
  9. 小汤学编程之JAVA基础day13——I/O流
  10. maven 插件深入了解