如何实现点击不同链接打开对应Modal窗口？求代码解决方案

嘿，我看你遇到的问题是多个链接都触发同一个Modal对吧？核心问题出在你的HTML里重复使用了相同的id（wrap和window）——浏览器里id必须是唯一标识，所以JS只会找到第一个匹配的元素，自然点哪个链接都弹同一个窗口。另外你的函数也没针对不同Modal做区分，来看看完整的修正代码：

<style>
/* 把通用样式改成类，让多个Modal可以复用 */
.modal-wrap { 
    display: none; 
    opacity: 0.8; 
    position: fixed; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    padding: 16px; 
    background-color: rgba(1, 1, 1, 0.725); 
    z-index: 100; 
    overflow: auto; 
}
.modal-window { 
    width: 400px; 
    height: 400px; 
    margin: 50px auto; 
    display: none; 
    background: #fff; 
    z-index: 200; 
    position: fixed; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    padding: 16px; 
    border-radius: 5px; 
}
.close {
    cursor: pointer;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// 修改函数，加入Modal标识参数
function send(prodId, targetDivId) { 
    $("#" + targetDivId).load("prod.php/?id_prod=" + prodId); 
}
function show(state, modalWrapId, modalWindowId) { 
    document.getElementById(modalWrapId).style.display = state; 
    document.getElementById(modalWindowId).style.display = state; 
}
</script>

<!-- 第一个链接与对应Modal -->
<a onclick="send('25', 'div1');show('block', 'wrap1', 'window1');" style='text-decoration:none;color:#000;cursor:pointer;'>Open window</a>
<div onclick="show('none', 'wrap1', 'window1')" class="modal-wrap" id="wrap1"></div>
<div class="modal-window" id="window1">
    <img class="close" onclick="show('none', 'wrap1', 'window1')" src="http://sergey-oganesyan.ru/wp-content/uploads/2014/01/close.png">
    <div id="div1"> Window 1 </div>
</div>

<!-- 第二个链接与对应Modal -->
<a onclick="send('26', 'div2');show('block', 'wrap2', 'window2');" style='text-decoration:none;color:#000;cursor:pointer;'>Open window 2</a>
<div onclick="show('none', 'wrap2', 'window2')" class="modal-wrap" id="wrap2"></div>
<div class="modal-window" id="window2">
    <img class="close" onclick="show('none', 'wrap2', 'window2')" src="http://sergey-oganesyan.ru/wp-content/uploads/2014/01/close.png">
    <div id="div2"> Window 2 </div>
</div>

关键改动说明： #

• 用类复用样式：把原来的#wrap和#window改成类选择器，避免重复写相同的CSS代码
• 给每个Modal设置唯一id：第一个Modal的遮罩是wrap1、窗口是window1，第二个是wrap2、window2，确保浏览器能精准定位每个元素
• 函数新增参数：send函数新增目标容器id，show函数新增遮罩层和窗口的id参数，让函数能区分操作哪个Modal
• 链接事件传对应参数：每个链接调用函数时，传入自己对应的Modal标识和产品id（示例中第二个链接的产品id改成了26，你可以根据实际需求调整）

这样点击不同的链接，就会打开对应的Modal窗口，加载对应的产品内容啦！

内容的提问来源于stack exchange，提问作者Game Eagle