Web - JavaScript - 实现拖动对话框（模态框）

Codefreyy

已于 2022-03-21 20:28:45 修改

阅读量948

点赞数

于 2022-03-20 23:10:14 首次发布

本文链接：https://blog.csdn.net/godfreyyyy/article/details/123624241

版权

本文介绍如何利用JavaScript、HTML和CSS实现可拖动的模态框。通过解析核心代码，分解结构层和样式层的设计，展示了创建交互式前端元素的详细步骤。

摘要由CSDN通过智能技术生成

效果

核心代码

 <script>
        //获取元素
        var click = document.querySelector('.login-header a');
        var login = document.querySelector('.login');
        var box = document.querySelector('.box');
        var close = document.querySelector('.close-login');
        var title = document.querySelector('#title')
        var bg = document.querySelector('.login-bg');

        //(1)登录框的弹出与退出
        //点击上方文字弹出对话框,出现遮罩
        click.addEventListener('click', function () {
            login.style.display = 'block';
            bg.style.display = 'block';
        })

        //点击关闭的×号,关闭对话框,遮罩消失
        close.addEventListener('click', function () {
            login.style.display =