js+css+html点击登录后弹出可拖拽的模态框

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量2k 收藏 31
点赞数 2
分类专栏： JavaScript 文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46612221/article/details/121883707
版权

js+css+html点击登录后弹出可拖拽的模态框

1 案例概述

我们经常能在网页上见到，当点击登录之后，就会弹出一个对话框，对话框中输入用户名和密码就可以登录，而且在弹出对话框之后，除了对话框之外的背景都变为灰色，此对话框还可以在页面上进行拖拽。

案例分析设计图：
在这里插入图片描述
效果图如下，页面初始样子为：
在这里插入图片描述
当点击“登录会员”时，效果图如下：
在这里插入图片描述
当鼠标在页面上拖拽时，模态框会移动位置：
在这里插入图片描述
点击右上角关闭按钮后，页面回到初始的样子：
在这里插入图片描述

2 编写HTML代码

HTML页面包含三个部分，第一是遮罩层，就是弹出对话框时的灰色的背景；第二是弹出的模态框（对话框），这个部分包含了表单、提交按钮以及右上角的关闭按钮；第三是在所有操作之前在页面上显示的文字，即“登录会员”文字。

第一部分：遮罩层

    <!-- 遮罩层 -->
    <div class="login-bg"></div>

第二部分：登录界面

    <!-- 模态对话框 -->
    <div class="model">
        <form>
            <!-- 模态对话框标题 -->
            <div class="item1">登录会员</div>
            <!-- 模态对话框内容 -->
            <div class="item2">
                <div class="username">
                    <label>
                        用户名：
                        <input type="text" name="username">
                    </label>
                </div>
                <div class="password">
                    <label>
                        登陆密码：
                        <input type="password" name="password">
                    </label>
                </div>
            </div>
            <!-- 登录按钮 -->
            <div class="item1">
                <div class="vip">登录会员</div>
            </div>
        </form>
        <!-- 关闭对话框按钮 -->
        <div class="close">x</div>
    </div>

第三部分：未操作时页面上显示的文字

    <!-- 未操作时页面显示的文字 -->
    <div class="login-header">登录会员</div>

在这里插入图片描述

3 编写CSS代码

在CSS中，我们要为上面的HTML元素设置样式，首先是遮罩层，遮罩层的背景色应该为灰色，宽高应该和整个网页相同，但是如果只是这样设置，效果是显示不出来的，因此需要为它设置绝对定位属性，将其脱离文档流，最后将其先隐藏起来，代码如下：

    /* 遮罩层样式 */
    .login-bg {
        width: 100%;
        height: 100%;
        background-color: #ccc;
        position: absolute;
        top: 0;
        left: 0;
        /* 隐藏 */
        display: none;
    }

由于隐藏起来效果不可见，因此下面的截图是不加最后一句“display: none;”时的效果：
在这里插入图片描述
然后为模态对话框设置样式，为模态对话框设置合适的宽高和阴影，将其定位到页面中合适的位置，设置鼠标移动到上面时显示移动的标志，最后将其隐藏，代码如下：

    /* 为模态对话框设置样式 */
    .model {
        width: 500px;
        height: 200px;
        box-shadow: 0px 0px 20px #ddd;
        /* 更改鼠标箭头的样式 */
        cursor: move;
        display: none;
        /* 设置绝对定位，将其定位到合适的位置 */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

由于隐藏起来效果不可见，因此下面的截图中是未隐藏时的效果，换句话说，display: none;先不写入上面的代码中，而且在下面对模态框中各种标签的设置中，也先不隐藏，效果如下：
在这里插入图片描述
然后对表单元素，也就是<form></form>元素设置样式，将该元素设置为弹性盒子，方便对表单内部元素进行排列，并且为其设置宽高，代码如下：

    /* 为表单元素设置样式 */
    form {
        /* 设置其占满该盒子 */
        width: 100%;
        height: 100%;
        /* 设置为弹性盒子 */
        display: flex;
        /* 排列方向为竖版排列 */
        flex-direction: column;
    }

注：由于.model先没有写入display: none;，所以才能看见如下效果
在这里插入图片描述
接下来为表单标题和按钮item1设置样式，将其设置为弹性盒子，字体设置为粗体，水平居中对齐，垂直居中对齐，然后将其设置为和其他的盒子共同平分垂直的空间，代码如下：

    /* 为表单标题和按钮item1设置样式 */
    .item1 {
        font-weight: bold;
        /* 设置为弹性盒子 */
        display: flex;
        /* 水平居中对齐 */
        justify-content: center;
        /* 垂直居中对齐 */
        align-items: center;
        /* 与其他盒子平分空间 */
        flex: 1;
    }

注：由于.model先没有写入display: none;，所以才能看见如下效果
在这里插入图片描述
为输入数据部分设置样式，将其设置为弹性盒子，排列方向为竖版排列，设置与其他盒子平分空间，设置水平居中对齐，代码如下：

    /* 为输入数据部分设置样式 */
    .item2 {
        display: flex;
        /* 设置垂直排列 */
        flex-direction: column;
        /* 平分空间 */
        flex: 1;
        /* 页面上显示垂直方向盒子两侧的间隔相同 */
        justify-content: space-around;
        /* 页面上显示盒子水平居中 */
        align-items: center;
    }

注：
1、由于.model先没有写入display: none;，所以才能看见如下效果
2、原本justify-content设置的是项目水平对齐方式，align-items设置的是项目垂直对齐方式，但是由于该盒子设置了flex-direction: column;，盒子的排列方向变成了竖向，所以盒子水平和垂直的样式相应地发生了方向的改变，justify-content设置成了项目垂直对齐方式，align-items设置成了项目水平对齐方式。
在这里插入图片描述
接着为盒子的按钮（“登陆会员”）设置样式，为其设置边框与圆角、背景色和内边距，以及字体颜色，代码如下：

    /* 为盒子按钮设置样式 */
    .vip {
        border: 1px solid #ccc;
        border-radius: 20px;
        padding: 3px 40px;
        background-color: orange;
        color: white;
    }

注：由于.model先没有写入display: none;，所以才能看见如下效果
在这里插入图片描述

到现在可以看出，用户名这一行偏左，因此将其向右移动一点，与下面的登录密码对齐，代码如下：

    /* 为用户名那一行设置样式 */
    .username {
        margin-left: 16px;
    }

注：由于.model先没有写入display: none;，所以才能看见如下效果
在这里插入图片描述
接着为右上角的关闭按钮写样式。将其绝对定位到右上角，并且设置为圆形，给它添加一个边框，将它的文字写到正中间，设置背景色以及鼠标的样式，代码如下：

    /* 为关闭按钮写入样式 */
    .close {
        width: 20px;
        height: 20px;
        /* 设置圆角后，该小正方形就显示圆形 */
        border-radius: 50%;
        background-color: white;
        position: absolute;
        top: -10px;
        right: -10px;
        /* 设置边框，便于确认边界 */
        border: 1px solid #ccc;
        /* 文字水平居中 */
        text-align: center;
        /* 文字垂直居中 */
        line-height: 16px;
        cursor: pointer;
    }

注：
1、由于.model先没有写入display: none;，所以才能看见如下效果；
2、到了这一步，模态框的样式就设置完成了，接下来的代码中.model会加上display: none;。
在这里插入图片描述
为.model加上display: none;之后，效果如下，页面上只显示“登录会员”四个字：
在这里插入图片描述
接下来为这行字设置一个样式，将其设置文字居中20磅，鼠标样式为小手，代码如下：

    /* 为登录会员设置样式 */
    .login-header {
        /* 文字水平居中 */
        text-align: center;
        /* 文字字体放大 */
        font-size: 20pt;
        /* 设置鼠标样式 */
        cursor: pointer;
    }

在这里插入图片描述
到这里CSS样式的设置就结束了，接下来是JavaScript代码设计。

4 编写JavaScript代码

JavaScript部分中，要设计3个部分，第一个部分是当点击页面上的“登录会员”时，页面上会弹出模态框，而且背景为遮罩层；第二个部分是当点击模态框右上角的“X”时，模态框关闭，遮罩层关闭，页面上恢复显示“登录会员”；第三部分是当鼠标移动到模态框上时，可以拖着模态框在页面上来回移动。

首先，获取页面上的元素，本效果涉及到的元素有模态框、遮罩层、右上角“X”以及最初显示的“登录会员”按钮，所以将它们获取出来，代码如下：

        //1、获取页面上的元素
        let login = document.querySelector(".login-header");//获取“登陆会员”
        let bg = document.querySelector(".login-bg");//获取遮罩层
        let model = document.querySelector(".model");//获取模态框
        let close = document.querySelector(".close");//获取关闭按钮

然后为“登录会员”注册click事件，当点击“登录会员”时，模态框就会弹出来，遮罩层也会弹出来，但是这时模态框的背景色也变成了灰色，因此需要将模态框背景色设置为白色，代码如下：

        //2、为“登录会员”添加click事件
        login.addEventListener("click", function () {
            bg.style.display = "block";//显示遮罩层
            model.style.display = "block";//显示模态框
            model.style.backgroundColor = "white";//模态框背景色改成白色
        })

为关闭按钮添加click事件，当点击关闭时，模态框不显示，遮罩层也不显示，代码如下：

        //3、为关闭按钮添加click事件
        close.addEventListener("click", function () {
            model.style.display = "none";//模态框设置不可见
            bg.style.display = "none";//遮罩层设置不可见
        })

接下来是精髓部分，为模态框注册鼠标按下的事件，当鼠标在模态框中按下时，可以拖着模态框在页面上移动，代码如下：、

        //4、为模态框注册按下鼠标事件(mousedown)
        model.addEventListener("mousedown", function (e) {
            //(1)获取鼠标在模态框中的坐标
            let x = e.pageX - model.offsetLeft;//横坐标=鼠标在页面中的横坐标-模态框在页面中的偏移量
            let y = e.pageY - model.offsetTop;//纵坐标=鼠标在页面中的纵坐标-模态框在页面中的纵坐标
            //(2)定义移动的函数
            function move(e) {
                //模态框在页面中的纵坐标=鼠标在页面中的横坐标-鼠标在模态框中的横坐标
                model.style.left = e.pageX - x + "px";
                //模态框在页面中的横坐标=鼠标在页面中的纵坐标-鼠标在模态框中的纵坐标
                model.style.top = e.pageY - y + "px";
            }
            //(3)给文档注册鼠标移动事件
            document.addEventListener("mousemove", move);
            //(4)给文档注册鼠标弹起事件
            document.addEventListener("mouseup", function () {
                document.removeEventListener("mousemove", move);
            })
        })

5 总代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 遮罩层样式 */
    .login-bg {
        width: 100%;
        height: 100%;
        background-color: #ccc;
        position: absolute;
        top: 0;
        left: 0;
        /* 隐藏 */
        display: none;
    }

    /* 为模态对话框设置样式 */
    .model {
        width: 500px;
        height: 200px;
        box-shadow: 0px 0px 20px #ddd;
        /* 更改鼠标箭头的样式 */
        cursor: move;
        display: none;
        /* 设置绝对定位，将其定位到合适的位置 */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    /* 为表单元素设置样式 */
    form {
        /* 设置其占满该盒子 */
        width: 100%;
        height: 100%;
        /* 设置为弹性盒子 */
        display: flex;
        /* 排列方向为竖版排列 */
        flex-direction: column;
    }

    /* 为表单标题item1设置样式 */
    .item1 {
        font-weight: bold;
        /* 设置为弹性盒子 */
        display: flex;
        /* 水平居中对齐 */
        justify-content: center;
        /* 垂直居中对齐 */
        align-items: center;
        /* 与其他盒子平分空间 */
        flex: 1;
    }

    /* 为输入数据部分设置样式 */
    .item2 {
        display: flex;
        /* 设置垂直排列 */
        flex-direction: column;
        /* 平分空间 */
        flex: 1;
        /* 页面上显示垂直方向盒子两侧的间隔相同 */
        justify-content: space-around;
        /* 页面上显示盒子水平居中 */
        align-items: center;
    }

    /* 为盒子按钮设置样式 */
    .vip {
        border: 1px solid #ccc;
        border-radius: 20px;
        padding: 3px 40px;
        background-color: orange;
        color: white;
    }

    /* 为用户名那一行设置样式 */
    .username {
        margin-left: 16px;
    }

    /* 为关闭按钮写入样式 */
    .close {
        width: 20px;
        height: 20px;
        /* 设置圆角后，该小正方形就显示圆形 */
        border-radius: 50%;
        background-color: white;
        position: absolute;
        top: -10px;
        right: -10px;
        /* 设置边框，便于确认边界 */
        border: 1px solid #ccc;
        /* 文字水平居中 */
        text-align: center;
        /* 文字垂直居中 */
        line-height: 16px;
        cursor: pointer;
    }

    /* 为登录会员设置样式 */
    .login-header {
        /* 文字水平居中 */
        text-align: center;
        /* 文字字体放大 */
        font-size: 20pt;
        /* 设置鼠标样式 */
        cursor: pointer;
    }
</style>

<body>
    <!-- 遮罩层 -->
    <div class="login-bg"></div>
    <!-- 模态对话框 -->
    <div class="model">
        <form>
            <!-- 模态对话框标题 -->
            <div class="item1">登录会员</div>
            <!-- 模态对话框内容 -->
            <div class="item2">
                <div class="username">
                    <label>
                        用户名：
                        <input type="text" name="username">
                    </label>
                </div>
                <div class="password">
                    <label>
                        登陆密码：
                        <input type="password" name="password">
                    </label>
                </div>
            </div>
            <!-- 登录按钮 -->
            <div class="item1">
                <div class="vip">登录会员</div>
            </div>
        </form>
        <!-- 关闭对话框按钮 -->
        <div class="close">x</div>
    </div>
    <!-- 未操作时页面显示的文字 -->
    <div class="login-header">登录会员</div>
    <script>
        //1、获取页面上的元素
        let login = document.querySelector(".login-header");//获取“登陆会员”
        let bg = document.querySelector(".login-bg");//获取遮罩层
        let model = document.querySelector(".model");//获取模态框
        let close = document.querySelector(".close");//获取关闭按钮
        //2、为“登录会员”添加click事件
        login.addEventListener("click", function () {
            bg.style.display = "block";//显示遮罩层
            model.style.display = "block";//显示模态框
            model.style.backgroundColor = "white";//模态框背景色改成白色
        })
        //3、为关闭按钮添加click事件
        close.addEventListener("click", function () {
            model.style.display = "none";//模态框设置不可见
            bg.style.display = "none";//遮罩层设置不可见
        })
        //4、为模态框注册按下鼠标事件(mousedown)
        model.addEventListener("mousedown", function (e) {
            //(1)获取鼠标在模态框中的坐标
            let x = e.pageX - model.offsetLeft;//横坐标=鼠标在页面中的横坐标-模态框在页面中的偏移量
            let y = e.pageY - model.offsetTop;//纵坐标=鼠标在页面中的纵坐标-模态框在页面中的纵坐标
            //(2)定义移动的函数
            function move(e) {
                //模态框在页面中的纵坐标=鼠标在页面中的横坐标-鼠标在模态框中的横坐标
                model.style.left = e.pageX - x + "px";
                //模态框在页面中的横坐标=鼠标在页面中的纵坐标-鼠标在模态框中的纵坐标
                model.style.top = e.pageY - y + "px";
            }
            //(3)给文档注册鼠标移动事件
            document.addEventListener("mousemove", move);
            //(4)给文档注册鼠标弹起事件
            document.addEventListener("mouseup", function () {
                document.removeEventListener("mousemove", move);
            })
        })
    </script>
</body>

</html>
橘猫吃不胖～
关注
  • 2
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用 Html、CSS 和 JavaScript 创建模态弹出框的方法
琴歌声声送我的博客
12-05 1150
在创建网页设计时，要考虑的最重要的事情之一是用户交互性。用户交互性的一个很好的例子是模式框。模式框主要显示为基于用户执行的操作的消息框在浏览器中。模态框有不同的形式和形状，包括警报框、Flash 通知框、对话框、灯箱。等。模态框的独特之处在于，它禁用浏览器中的主窗口，但使其保持可见，模态窗口在网页前面显示为子窗口。在应用程序中使用模态的一些重要情况包括：显示针对某些操作过程的警告，这些警告可能是不可逆的。
js自定义密码输入框弹窗
05-29
js自定义密码输入框弹窗的demo，因项目需要所以编写了这个小demo，如有需要同志们可以自行下载直接复制粘贴就行，然后浏览器打开测试。
JS+CSS实现可拖动的弹出提示框
10-24
主要介绍了JS+CSS实现可拖动的弹出提示框,涉及针对鼠标事件及html元素的操作技巧,非常具有实用价值,需要的朋友可以参考下
如何使用CSS实现一个模态框（Modal）效果？
官方推荐
08-15 6410
如何使用CSS实现一个模态框（Modal）效果？
js实现密码输入框点击小眼睛显示或隐藏密码
努力变好
10-17 4903
登录页密码框加密输入不知道对错，加个小眼睛方便查看和修改，下面是小眼睛效果图，如果不喜欢这个图标可以自己去。（因为只把密码输入框展示出来了，所以样式自行调整，只给你们展示功能代码）
js实现弹窗登录验证
hyty的博客
09-28 1万+
js实现弹窗登录验证 1.CSS隐藏的弹窗块 &amp;lt;style&amp;gt; #notClickDiv{ filter:alpha(Opacity=35);opacity:0.35; /*设置不透明度为35%*/ background:#000000; /*设置背景为黑色*/ position:absolute; /*设置定位方式为绝对位置*/ display:none...
js 单击 弹出 页面 Model
Joe_elena的博客
08-14 1999
//效果  // model  &lt;%--Model框--%&gt; &lt;div class="modal" id="mymodal"&gt; &lt;div class="modal-dialog"&gt; &lt;div class="moda
纯CSS写弹出层样式
TheFoma的专栏
04-18 8900
弹出层的js比较好控制，给按钮添加点击事件，然后让弹出层显示，背景变暗并且不能点击； 样式是纯css写的 需要用到定位 position;使用position定位时需要注意定位是相对定位（reltive）还是绝对（abslute），绝对定位是继承他的父元素的。还有fixed;这个是让元素固定；不跟随滚动移动； 当然，position的属性之后还有top。bottom和left.，right;
js点击弹出登录框
热门推荐
Young_Fee的博客
01-12 2万+
弹出登录框
【html弹框拖拽和div拖拽功能】原生html页面引入vue语法后通过自定义指令简单实现div和弹框拖拽功能
seeeeeeeeeee的博客
02-13 1808
这是html版本的。只是引用了vue的语法。这是很多公司会出现的一种情况，就是原生的页面，引入vue的语法开发这就导致有些vue上很简单的功能。放到这里需要转换一下以前写过一个vue版本的帖子，现在再加一个html版本的。
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
10-24
主要介绍了JS+CSS实现可拖拽的漂亮圆角特效弹出层,以完整实例形式分析了弹出层特效及圆角矩形的实现技巧,需要的朋友可以参考下
JS+CSS实现实用的单击输入框弹出选择框的方法
10-24
主要介绍了JS+CSS实现实用的单击输入框弹出选择框的方法,实例分析了javascript操作select及button的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JS+CSS实现实用的单击输入框弹出选择框的方法.docx
01-19
JS+CSS实现实用的单击输入框弹出选择框的方法.docx
HTML+CSS+JavaScript实现登录注册源码
05-31
HTML+CSS+JavaScript实现登录注册源码
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 417
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1009
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 522
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 305
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 415
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
你能否用html+css+js语言做一个点击按钮弹出提示框的代码
03-22
当然可以，以下是一个简单的示例代码： HTML代码： ``` <button onclick="showAlert()">点击我</button> ``` JavaScript代码： ``` function showAlert() { alert("你点击了按钮！"); } ``` CSS代码： ``` /* 可以添加样式来美化按钮 */ button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } ``` 当用户点击按钮时，会弹出一个提示框，显示"你点击了按钮！"的信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值