在项目开发中遇到一个问题，需要在layui框架下创建多个具有独立内容的弹出框。初始尝试使用layui的默认设置，结果导致所有弹框显示相同内容。经过请教前端专家，得到了修正后的解决方案，现在可以成功实现同页面多个弹出框并确保它们之间互不影响。通过这个经验分享，可以帮助遇到类似问题的开发者找到正确的实现方式。
起因：因项目需求，用layui写静态页面时，发现页面中有多个弹框效果，且每个弹出框内容各不相同，粘了框架的“居中弹出”方法，但发现不管点击哪一个按钮，出现的都是第一个弹出框内容。
解决方案：无奈下，找了公司的前端大佬，她修改后的小deom如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>测试多个弹框效果</title>
<link rel="stylesheet" type="text/css" href="../css/iconfont.css">
<link rel="stylesheet" href="../css/layui.css">
</head>
<style type="text/css">
.Btn1, .Btn2, .Btn3{
margin: 20px;
}
.tan1, .tan2, .tan3{
padding: 20px;
}
</style>
<body>
<button data-type="auto" class="layui-btn Btn1">
<i class="iconfont icon-daochu1"
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
