模态框的拖拽

最新推荐文章于 2024-07-12 18:49:24 发布

pumpkin_truck

最新推荐文章于 2024-07-12 18:49:24 发布

阅读量1.3k

点赞数 4

文章标签： javascript css html

本文链接：https://blog.csdn.net/pumpkin_truck/article/details/111147058

版权

这篇博客介绍了如何在网页中创建一个可拖动的模态框。通过结合HTML、CSS和JavaScript，实现了模态框的显示、关闭以及拖曳效果。在拖曳过程中，当鼠标按下、移动和松开时，模态框会相应地响应拖动操作。

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

拖动模态框

在许多网页中，弹出框和拖曳的使用是非常多的，今天我们就通过一个案列来学习这两个功能。css和HTML的代码事先已经准备好了，接下来通过添加js实现功能
在这里插入图片描述
html代码如下：

 <div class="login-header"><a id="link" href="javascript:void(0);">点击，弹出登录框</a></div>
   <!-- 弹出框容器 -->
    <div id="login" class="login">
        <div id="title" class="login-title">登录会员
            <!-- 关闭按钮 -->
            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
        </div>
       <!-- 表单登录信息 -->
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名：</label>
                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class=