文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript+CSS实现模态框效果

2024-04-02 19:55

关注

本文实例为大家分享了JavaScript+CSS实现模态框效果的具体代码,供大家参考,具体内容如下

发现的问题

1)鼠标按下后拖动的瞬间,光标会脱离模态盒子跑到外面
2)鼠标弹起事件不起作用

解决的思路

首先是因为代码里有用到offsetLeft和offsetTop这两个属性,所以考虑是不是模态框的定位出现了问题 。

又:设置关闭标签设置了绝对定位,那么loginBox作为其父级元素我将其设置为相对定位

各个类型定位的介绍:

1.静态定位: position: static 默认,也就是文档流定位,元素的显示位置与源码顺序一致(不是定位元素)

2.相对定位: position: relative;相对于该元素在文档流中的原始位置进行偏移

3.绝对定位: position: absolue;相对于它的祖先中离它最近的”定位元素”的位置发生偏移(如果祖先元素中不存在定位元素,它就参考根元素(html)进行定位)

4.固定定位: position: fixed; 是绝对定位的一个特例,它始终相对于html定位

定位元素:只要这个元素中有position: relative;或者 position:absolute;就称为定位元素

由上可看出,相对定位,指的是相对于该元素在文档流中的原始位置进行偏移而不是相对于html,所以loginBox不能设置为相对定位。可以用绝对定位或固定定位,两者均可。

另外,需要注意使用top、left定位后,则margin-top、margin-left产生同方向相加的位移效果,margin-bottom、margin-righ产生无任何效果的margin空间。所以保留margin: 100px auto;时效果还是会有些奇怪,注释起来了就好了。

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            background-color: white;
        }
        
        .dianji {
            height: 50px;
            width: 300px;
            font-size: 20px;
            margin: 10px auto;
            cursor: pointer;
        }
        
        .loginBox {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            
            box-sizing: border-box;
            height: 200px;
            width: 370px;
            background-color: white;
            text-align: center;
            display: none;
        }
        
        .loginBox>span {
            position: absolute;
            top: -15px;
            right: -15px;
            height: 30px;
            width: 30px;
            font-size: 8px;
            line-height: 30px;
            border-radius: 50%;
            background-color: white;
            border: 1px solid #cccccc;
        }
        
        .loginBox h5 {
            
            margin-bottom: 18px;
            font-weight: normal;
            font-size: 16px;
            cursor: move;
        }
        
        .uname {
            margin: 18px 0 15px 15px;
            height: 25px;
            line-height: 25px;
        }
        
        .uname span,
        .psw span {
            font-size: 12px;
        }
        
        .uname input,
        .psw input {
            height: 25px;
            width: 230px;
            font-size: 12px;
            outline: none;
        }
        
        .loginBox button {
            margin: 20px;
            width: 190px;
            height: 30px;
            border: 1px solid #cccccc;
        }
    </style>
</head>

<body>
    <div class="dianji">点击,弹出登录框</div>
    <div class="loginBox">
        <span class="close">关闭</span>
        <h5>登录会员</h5>
        <div class="uname"><span>用户名:</span> <input type="text" placeholder="请输入用户名"></div>
        <div class="psw"><span>登录密码:</span> <input type="password" placeholder="请输入密码"></div>
        <button>登录</button>
    </div>
    <script>
        var dianji = document.querySelector('.dianji');
        var loginBox = document.querySelector('.loginBox');
        var close = document.querySelector('.close');
        var bodyy = document.body;
        var move_area = document.querySelector('h5');
        dianji.addEventListener('click', function() {
            bodyy.style.backgroundColor = '#ccc';
            loginBox.style.display = 'block';
        })
        close.addEventListener('click', function() {
            bodyy.style.backgroundColor = 'white';
            loginBox.style.display = 'none';
        })
        move_area.addEventListener('mousedown', function(e) {
            var x = e.pageX - loginBox.offsetLeft;
            var y = e.pageY - loginBox.offsetTop;
            console.log('x=' + x + '  y=' + y);
            document.addEventListener('mousemove', move)

            function move(e) {
                loginBox.style.left = e.pageX - x + 'px';
                loginBox.style.top = e.pageY - y + 'px';
            }
            //鼠标弹起,就是让鼠标移动时间解除
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            })
        })
    </script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯