通过 JavaScript 实现弹出层的简单方式

最新推荐文章于 2023-12-24 20:03:59 发布

centralunit

最新推荐文章于 2023-12-24 20:03:59 发布

阅读量2.3k

点赞数 2

分类专栏： JavaScript 前端

本文链接：https://blog.csdn.net/centralunit/article/details/105055064

版权

文件结构

文件结构参照下图，忽略 .vscode 文件夹
在这里插入图片描述

说明

点击按钮出现弹出层
允许用户自定义弹出框内容
弹出层存在时隐藏滚动条并禁止滚动
点击弹出框的按钮或右上角的 X 关闭弹出层

效果图

下图为弹出前样式
在这里插入图片描述
下图为弹出层样式

HTML 结构

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹出层练习</title>
    <link rel="stylesheet" href="./main.css" />
</head>

<body>
    <!-- 弹出层结构 -->
    <!-- <div class="mask"></div>
    <div class="modal-wrap">
        <div class="modal">
            <div class="modal-header">
                <div class="modal-title">Title</div>
                <div class="close">
                    <span></span>
                    <span></span>
                </div>
            </div>

            <div class="modal-content">Content</div>

            <div class="modal-footer">
                <button class="modal-confirm">Confirm</button>
            </div>
        </div>
    </div> -->

    <!-- 用户定义弹出框内容 -->
    <div class="user-input">
        <input type="text" id="input-title" placeholder="请输入弹出框标题（默认为 Title）" />
        <input type="text" id="input-content" placeholder="请输入弹出框内容（默认为 Content）" />
        <input type="text" id="input-buttontext" placeholder="请输入弹出框关闭按钮文字（默认为 Confirm）" />
    </div>

    <!-- 点击按钮触发弹出层 -->
    <div>
        <button id="test">Trigger</button>
    </div>

    <script src="./main.js"

最低0.47元/天解锁文章

centralunit

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
通过 JavaScript 实现弹出层的简单方式

文件结构文件结构参照下图，忽略 .vscode 文件夹说明点击按钮出现弹出层允许用户自定义弹出框内容弹出层存在时隐藏滚动条并禁止滚动点击弹出框的按钮或右上角的 X 关闭弹出层效果图下图为弹出前样式下图为弹出层样式HTML 结构<!DOCTYPE html><html lang="en"><head> <meta...
复制链接

扫一扫

专栏目录