如何实现并排打开多个Modal模态对话框，现有jQuery代码问题求助

第一步：修复现有代码语法错误 #

你当前提供的代码存在$(document).ready回调函数闭合位置错误的语法问题，修正后的可运行基础代码如下，已标注可选的querySelector写入位置：

<script>
$(document).ready(function () {
    // 位置1：页面DOM加载完成后就需要执行的querySelector逻辑可写在这里
    $('#openBtn').click(function () {
        // 位置2：点击openBtn触发模态框时需要执行的querySelector逻辑可写在这里
        $('#myModal').modal({
            show: true
        })
    });

    $(document).on('show.bs.modal', '.modal', function (event) {
        // 位置3：模态框显示触发逻辑内部需要的querySelector可写在这里
        var zIndex = 1040 + (10 * $('.modal:visible').length);
        $(this).css('z-index', zIndex);
        setTimeout(function () {
            // 位置4：延时回调内部需要的querySelector可写在这里
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
    });
});
</script>

第二步：querySelector放置说明 #

原生document.querySelector/document.querySelectorAll和你当前用的jQuery选择器功能一致，无需额外依赖，放置规则如下：

• 核心原则是：需要在哪个业务逻辑里操作DOM元素，就把对应的querySelector写在对应逻辑块的靠前位置即可，前提是要操作的DOM已经完成渲染
• 如果是页面加载完成就要执行的选择器逻辑，直接写在上述代码标注的位置1即可

使用示例 #

比如你需要获取用户选择的需求类型来匹配适配产品，就可以按如下方式写：

// 写在位置1的示例：页面加载完成就获取需求选择下拉框元素
const demandSelect = document.querySelector('#demand-type-select');
// 监听用户选择变更事件，筛选适配产品
demandSelect.addEventListener('change', function() {
  const selectedDemand = this.value;
  // 此处编写根据选中需求匹配对应产品的逻辑
})

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