jquery弹出层联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 弹出层联动</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background: white;
            padding: 20px;
            border-radius: 5px;
        }
    </style>
</head>
<body>

<button id="openModal1">打开弹出层1</button>
<button id="openModal2">打开弹出层2</button>

<div id="modal1" class="modal">
    <div class="modal-content">
        <span class="close-btn">&times;</span>
        <p>这是弹出层1</p>
    </div>
</div>

<div id="modal2" class="modal">
    <div class="modal-content">
        <span class="close-btn">&times;</span>
        <p>这是弹出层2</p>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $('#openModal1').click(function(){
        $('#modal1').show();
    });
    $('#openModal2').click(function(){
        $('#modal2').show();
    });
    $('.close-btn').click(function(){
        $(this).closest('.modal').hide();
    });
});
</script>

</body>
</html>

$(document).ready(function(){
    $('.modal').on('show.bs.modal', function () {
        $('body').css('overflow', 'hidden');
    });
    $('.modal').on('hide.bs.modal', function () {
        $('body').css('overflow', '');
    });
});

function openModal(modalId) {
    $('.modal').hide(); // 隐藏所有弹出层
    $(modalId).show(); // 显示指定的弹出层
}