标签：模态 style 拖动 js height width let login document

 效果如下：

代码如下：

<div class="clickBtn">点击，弹出登录框</div>
    <div class="login">
        <h3>登录会员</h3>
        <table>
            <tr>
                <td class="left">用户名：</td>
                <td><input type="text" placeholder="请输入用户名" name="" id=""></td>
            </tr>
            <tr>
                <td class="left">登陆密码：</td>
                <td><input type="text" placeholder="请输入登录密码" name="" id=""></td>
            </tr>
        </table>
        <button>登录会员</button>
        <div class="closebtn">关闭</div>
    </div>

    <div class="mask"></div>

style:

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

    .mask {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        background-color: rgba(0, 0, 0, .3);
    }

    .clickBtn {
        margin: 10px auto;
        width: 200px;
        border: 0px;
        font-size: 20px;
        font-weight: 700;
        background-color: #fff;
        cursor: pointer;
    }

    .login {
        visibility: hidden;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        display: flex;
        flex-direction: column;
        align-items: center;

        padding: 20px;
        box-sizing: border-box;

        width: 500px;
        height: 300px;
        border: 1px solid #eee;
        background-color: #fff;
        z-index: 1;
    }

    .login h3 {
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: 400;
        height: 30px;
        width: 100%;
        text-align: center;
        cursor: move;
    }

    .login table {
        flex: 1;
        display: flex;
        margin: 0;
        padding: 0;

    }

    .login table tr {
        height: 50px;
        text-align: right;
    }

    .login table tr input {
        width: 300px;
        height: 30px;
        border-radius: 2px;
        border: 1px solid #eee;
    }

    .login table .left {
        font-weight: 400;
        width: 40%;
    }

    .login button {
        width: 260px;
        height: 40px;
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 2px;
        cursor: pointer;
    }

    .login button:hover {
        color: #fff;
        background-color: skyblue;
    }

    .login .closebtn {
        position: absolute;
        right: 0;
        top: 0;
        transform: translate(50%, -50%);
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: orange;
        border-radius: 50%;
        cursor: pointer;
    }
</style>

js:

<script>
        let btn = document.querySelector('.clickBtn')
        let login = document.querySelector('.login')
        let closebtn = document.querySelector('.closebtn')
        let mask = document.querySelector('.mask')

        let title = document.querySelector('h3')
        let body = document.querySelector('body')
        btn.addEventListener('click', function () {
            mask.style.display = 'block'
            login.style.visibility = 'visible'
        })

        closebtn.addEventListener('click', function () {
            mask.style.display = 'none'
            login.style.visibility = 'hidden'
        })

        title.addEventListener('mousedown', function (e) {
            let x = e.pageX - login.offsetLeft
            let y = e.pageY - login.offsetTop
            function move(e) {
                // 如果此处仍然用 x=e.pageX - x;login.style.left=x+'px' 就会出现错误，因为这里是浅拷贝，引用的是同一个地址，而mousedown事件一直触发mousemove事件，导致x对应地址的值一直在改变，且login.style.left=x+'px' 指向的也是这个地址，所以页面的区域就会出现晃动
                var xx = e.pageX - x;
                var yy = e.pageY - y;
                console.log(x, y);
                login.style.top = yy + 'px';
                login.style.left = xx + 'px';

            }

            // 在页面任何地方都应触发mousemove，故监听document的mousemove事件
            document.addEventListener('mousemove', move)

            // 在页面任何地方都应触发mouseup，故监听document的mouseup事件
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move)
            })
        })
    </script>

标签：模态,style,拖动,js,height,width,let,login,document
来源： https://www.cnblogs.com/zhh-blogs/p/15768285.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。