javascript - 需要复制我创建的模态，但我不确定需要更改哪些属性才能这样做？需要复制3次
问题描述
此模式完美运行，我现在需要在同一页面上复制此模式 3 次。我需要在同一页面上使用 3 个单独的按钮，以便能够调用 3 个单独的模式。现在我不知道需要更改哪些属性才能实现这一目标。
这是正文中的代码（CTA 按钮）
<!-- Trigger the modal with a button -->
<button id="modal-btn" class="button"> LEARN MORE</button>
这是模态的代码...
<!-- JQUERY SCRIPT -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- BEGIN CSS STYLES -->
<style>
.modal {
display: none;
position: fixed;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color: white;
background-color: rgba(0, 0, 0, 0.5);
overflow: scroll;
}
.modal-content {
position: relative;
padding: 10px;
margin: auto;
width: 75%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
}
.close-btn {
float: right;
padding-right: 50px;
color: lightgray;
font-size: 24px;
font-weight: bold;
}
.close-btn:hover {
color: darkgray;
}
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
.button {
background-color: #04347b; /* Blue */
border: none;
color: white;
padding: 12px 80px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
<!-- END CSS STYLES -->
<!-- BEGIN MODAL -->
<div class="modal">
<div class="modal-header">
<span class="close-btn">×</span>
</div>
<div class="modal-content">
<div class="col-sm-12 col-md-12" style="background-color: white; padding: 25px 50px;">
<div class="col-sm-12 col-md-12"><h2>Physiotherapy</h2></div>
<!--PRODUCT 1-->
<div class="col-sm-2 col-md-2" style="padding:10px 0;"><img src="{{media url=wysiwyg/images-test-1.png}}" alt="" /></div>
<div class="col-sm-4 col-md-4" style="padding:10px 0; text-align: left;">
<p><strong>PRODUCT TITLE 1<br>
Ref: xxxxxxx</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--END PRODUCT 1-->
<!--PRODUCT 2-->
<div class="col-sm-2 col-md-2" style="padding:10px 0;"><img src="{{media url=wysiwyg/images-test-1.png}}" alt="" /></div>
<div class="col-sm-4 col-md-4" style="padding:10px 0; text-align: left;">
<p><strong>PRODUCT TITLE 2<br>
Ref: xxxxxxx</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--END PRODUCT 2-->
</div>
<div class="col-sm-12 col-md-12" style="background-color: white; padding: 25px 50px;">
<!--PRODUCT 3-->
<div class="col-sm-2 col-md-2" style="padding:10px 0;"><img src="{{media url=wysiwyg/images-test-1.png}}" alt="" /></div>
<div class="col-sm-4 col-md-4" style="padding:10px 0; text-align: left;">
<p><strong>PRODUCT TITLE 3<br>
Ref: xxxxxxx</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--END PRODUCT 3-->
<!--PRODUCT 4-->
<div class="col-sm-2 col-md-2" style="padding:10px 0;"><img src="{{media url=wysiwyg/images-test-1.png}}" alt="" /></div>
<div class="col-sm-4 col-md-4" style="padding:10px 0; text-align: left;">
<p><strong>PRODUCT TITLE 4<br>
Ref: xxxxxxx</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--END PRODUCT 4-->
</div>
<div class="col-sm-12 col-md-12" style="background-color: white; padding: 25px 50px;">
<!--PRODUCT 5-->
<div class="col-sm-2 col-md-2" style="padding:10px 0;"><img src="{{media url=wysiwyg/images-test-1.png}}" alt="" /></div>
<div class="col-sm-4 col-md-4" style="padding:10px 0; text-align: left;">
<p><strong>PRODUCT TITLE 5<br>
Ref: xxxxxxx</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--END PRODUCT 5-->
<!--PRODUCT 6-->
<div class="col-sm-2 col-md-2" style="padding:10px 0;"><img src="{{media url=wysiwyg/images-test-1.png}}" alt="" /></div>
<div class="col-sm-4 col-md-4" style="padding:10px 0; text-align: left;">
<p><strong>PRODUCT TITLE 6<br>
Ref: xxxxxxx</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--END PRODUCT 6-->
</div>
<div class="col-sm-12 col-md-12" style="background-color: white; padding: 25px 50px;">
<!--PRODUCT 7-->
<div class="col-sm-2 col-md-2" style="padding:10px 0;"><img src="{{media url=wysiwyg/images-test-1.png}}" alt="" /></div>
<div class="col-sm-4 col-md-4" style="padding:10px 0; text-align: left;">
<p><strong>PRODUCT TITLE 7<br>
Ref: xxxxxxx</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--END PRODUCT 7-->
<!--PRODUCT 8-->
<div class="col-sm-2 col-md-2" style="padding:10px 0;"><img src="{{media url=wysiwyg/images-test-1.png}}" alt="" /></div>
<div class="col-sm-4 col-md-4" style="padding:10px 0; text-align: left;">
<p><strong>PRODUCT TITLE 8<br>
Ref: xxxxxxx</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--END PRODUCT 8-->
</div>
</div>
</div>
<!-- END MODAL -->
<!-- BEGIN SCRIPT -->
<script type="text/javascript">
let modalBtn = document.getElementById("modal-btn")
let modal = document.querySelector(".modal")
let closeBtn = document.querySelector(".close-btn")
modalBtn.onclick = function(){
modal.style.display = "block"
}
closeBtn.onclick = function(){
modal.style.display = "none"
}
window.onclick = function(e){
if(e.target == modal){
modal.style.display = "none"
}
}
</script>
<!-- END SCRIPT -->
<!-- BEGIN SCRIPT -->
<script type="text/javascript">
$('.modal').click(function(){
$('.modal').show();
$('body').css("overflow", "hidden");
});
</script>
<!-- END SCRIPT -->
解决方案
您可以将内容存储在隐藏的 div 中。像这样：
<div class="modal-hidden-content-1" style="display:none">CONTENT 1</div>
<div class="modal-hidden-content-2" style="display:none">CONTENT 2</div>
<div class="modal-hidden-content-3" style="display:none">CONTENT 3</div>
你的模态div：
<div class="modal">
<div class="modal-header">
<span class="close-btn">×</span>
</div>
<div class="modal-content"></div>
</div>
和按钮：
<button onclick="openModal('1')" class="button"> LEARN MORE 1</button>
<button onclick="openModal('2')" class="button"> LEARN MORE 2</button>
<button onclick="openModal('3')" class="button"> LEARN MORE 3</button>
然后javascript必须是：
<script>
function openModal(i) {
$('.modal-content').html($('.modal-hidden-content-'+i).html())
$('.modal').show();
$('body').css("overflow", "hidden");
}
</script>
推荐阅读
- node.js - 按猫鼬中的枚举值排序
- c++ - Qt 正确的无主 QObject 返回语义
- python - 使用 sklearn 计数矢量化器获取 n gram 后缀
- c++ - “表达式必须具有类类型”但是在检查类型时它确实有一个 char 类？
- vbscript - 如何列出组的成员值
- typescript - 约束泛型的对象属性类型
- javascript - 字符串连接添加不需要的字符的问题
- javascript - 为什么我不能从我的数组中抓取特定对象？
- flutter - 如何在 Flutter 中使用 Firebase 根据用户身份验证状态更新主屏幕？
- reactjs - JavaScript click 事件处理程序未在下面的代码中触发