js实现拖拽模态框三种js代码实现

最新推荐文章于 2024-09-03 15:56:02 发布

阿亮真的吃不饱

最新推荐文章于 2024-09-03 15:56:02 发布

阅读量1.3k

点赞数 5

分类专栏：拖拽模态框文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_45766156/article/details/123746064

版权

本文介绍了三种使用JavaScript实现拖拽模态框的方法。包括HTML、CSS和JS代码实现，示例中使用了阿里矢量图标库的图标，也可以通过设置border-radius创建圆形效果。期待读者提供反馈，共同学习进步。

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

HTML代码

<div class="link">
        <a id="linkA" href="javascript:;">点击我弹出登录模态框</a>
    </div>

    <div id="login" class="login">
        <div id="loginHeader" class="login-header">登录会员
            <span>
                <a href="javascript:;"><img id="closeBtn" class="close-btn" src="./img/关闭小.png" alt=""></a>
            </span>
        </div>
        <!-- 输入框 -->
        <div class="input-wrapper">
            <div class="login-input">
                <label for="username">用户名：</label>
                <input class="input-list" id="username" type="text" placeholder="请输入用户名" name="usernameInfo">
            </div>
            <div class="login-input">
                <label for="password">密码：</label>
                <input class="input-list" id="password" type="password" placeholder="请输入密码" name="passwordInfo">
            </div>
        </div>
        <!-- 按钮 -->