文件结构
文件结构参照下图,忽略 .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