简单的 html拖动模态框 案例

Posted 2021-12-07 靠技术吃饭

今天来做一个简单的拖动效果的案例！！

具体实现功能效果如下所示： 

 要想做好这个案例首先分为三个部分：html 框架和 css 样式、JavaScript 的交互效果（点击弹出和关闭的隐藏效果、最后就是一个拖动的效果）！

首先就是html框架和css渲染的样式

html框架：

    <div class="w"><a href="javascript:;">点击，弹出登录框</a></div>
    <div class="box">
        <div class="first">登录会员</div>
        <a href="JavaScript:;" class="close">关闭</a>
        <div class="second">
            <label for="">用户名：</label>
            <input type="text" name="" id="" value="请输入用户名">
        </div>
        <div class="second">
            <label for="">登录密码：</label>
            <input type="text" name="" id="" value="请输入登录密码">
        </div>
        <div class="last">登录会员</div>
    </div>
    <div class="bc"></div>

效果如图所示：

 要更好看当然得需要我们的css来渲染页面：

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .bc {
            background-color: #999;
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: -1;
            /* display: none; */
        }

        .w {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translate(-50%);
        }

        .w>a {
            font-size: 20px;
            text-decoration: none;
            color: black;
        }

        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            width: 400px;
            /* display: none; */
        }

        .first {
            height: 50px;
            text-align: center;
            line-height: 50px;
        }

        .second {
            margin-right: 40px;
        }

        .second {
            text-align: right;
        }

        .second>input {
            width: 260px;
            height: 20px;
            margin-bottom: 20px;
            outline: none;
            border: 1px solid rgb(206, 203, 203);
            color: #999;
            font-size: 12px;
        }

        .second>label {
            font-size: 13px;
        }

        .last {
            position: relative;
            left: 50%;
            transform: translate(-50%);
            text-align: center;
            width: 200px;
            height: 35px;
            line-height: 35px;
            margin-bottom: 30px;
            margin-top: 5px;
            border: 1px solid rgb(206, 203, 203);
        }

        .box a {
            position: absolute;
            right: -20px;
            top: -20px;
            background-color: #fff;
            display: inline-block;
            padding: 5px;
            height: 26px;
            line-height: 26px;
            border-radius: 50%;
            text-decoration: none;
            color: black;
            font-size: 13px;
        }
    </style>

选然后的效果如图所示： 

 现在基本框架计已经搭好了，接下来就是我们的 JavaScript 来做的页面交互效果，可分为两部来做！

1、点击弹出和关闭的显示隐藏效果

    <script>
        var w = document.querySelector('.w');
        var close = document.querySelector('.close');
        var box = document.querySelector('.box');
        var bc = document.querySelector('.bc');
        var first = document.querySelector('.first');
        w.addEventListener('click', function () {
            bc.style.display = 'block';
            box.style.display = 'block';
        })
        close.addEventListener('click', function () {
            bc.style.display = 'none';
            box.style.display = 'none';
        })
    </script>

先把需要点击或者要变化的元素节点获取过来，然后再添加点击事件实现隐藏好显示的效果！

2、拖动效果

    <script>
        first.onmousedown = function (e) {
            document.documentElement.style.cursor = 'move'
            var x = e.pageX - box.offsetLeft;
            var y = e.pageY - box.offsetTop;
            document.addEventListener('mousemove', move)
            function move(e) {
                box.style.left = e.pageX - x + 'px';
                box.style.top = e.pageY - y + 'px';
            }
            document.addEventListener('mouseup', function () {
                document.documentElement.style.cursor = 'default';
                document.removeEventListener('mousemove', move);
            })
        }
    </script>

紧接着就是一个鼠标 按下、移动和弹起 的效果，这样就一气呵成的实现了我们想要的拖动效果！