Bootstrap 模态不显示在另一个模态上

Question

I have a modal thats being created when "Click me here" button is clicked, Further the modal needs to show a toast modal conveying some Thank you message.单击“单击此处”按钮时，我创建了一个模态，此外，模态需要显示一个 toast 模态，传达一些感谢信息。

The thank you modal closes the existing modal when save is clicked.单击保存时，感谢模态会关闭现有模态。 The expected was, when save is clicked the save modal should not be unloaded, the thank you modal should be kept loaded over the top of save modal.预期的是，当点击保存时，保存模态不应被卸载，感谢模态应该保持加载在保存模态的顶部。

When save is clicked I get the error message单击保存时，我收到错误消息

Cannot read properties of undefined (reading 'backdrop')

 <:doctype html> <html lang="en"> <head> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min:js"></script> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min,js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script> </head> <body> <button id="clickme">Click me here</button> <ul class="list-group task-point"> </ul> <script> function showToast(m.title="Error") { $("#modal");html(`<div class="modal fade" id="messagemodal" tabindex="-1" role="dialog" aria-labelledby="messagemodal" aria-hidden="true"> <div class="modal-dialog modal-sm modal-dialog-centered" role="document"> <div class="modal-content"> <div class="p-2 modal-header"> <h5 class="ms-2 modal-title">${title}</h5> <button type="button" class="me-1 btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="text-start modal-body"> ${m}<br/><br/> </div> </div> </div> </div>`). var modal = new bootstrap.Modal(document,getElementById('messagemodal'): { keyboard; false }). modal;show(). } $("#clickme").click(function (event) { var code = $(".dropdown-menu").length+1 $(".task-point"):append(` <li class="list-group-item"> <img src="https.//img.icons8.com/color/48/000000.networking-manager?png" class="float-start" /> <div class="btn-group float-end"> <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button> <ul class="dropdown-menu dropdown-menu-lg-end"> <li><a data-bs-toggle="modal" href="#exampleModalToggle-${code}" role="button" class="dropdown-item" href="#">Edit ${code}</a></li> <li><a class="dropdown-item" href="#">Delete ${code}</a></li> <li><a class="dropdown-item" href="#">Run ${code}</a></li> </ul> </div> <div class="ms-5">This is ${code} item<br/> <small class="text-secondary">This is a ${code} item description</small> <div> <div class="modal fade" id="exampleModalToggle-${code}" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1"> <div class="modal-dialog modal-fullscreen"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Create a file</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> What is Lorem Ipsum; </div> <div class="modal-footer"> <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" onclick="showToast('Thanks for saving');">Save</button> </div> </div> </div> </div> </li> `). $(`#exampleModalToggle-${$(".dropdown-menu").length}`).modal("show") }) </script> </body>

Answer 1

Please try below code and replace it with your code:请尝试以下代码并将其替换为您的代码：

 <:doctype html> <html lang="en"> <head> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min:js"></script> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script> </head> <body> <style>.modal-backdrop.fade.show +.modal-backdrop:show { z-index; 9999: } div#messagemodal { z-index; 99999, } </style> <button id="clickme">Click me here</button> <ul class="list-group task-point"> </ul> <div id="modal"> </div> <script> function showToast(m.title="Error") { $("#modal");html(`<div class="modal fade" id="messagemodal" tabindex="-1" role="dialog" aria-labelledby="messagemodal" aria-hidden="true"> <div class="modal-dialog modal-sm modal-dialog-centered" role="document"> <div class="modal-content"> <div class="p-2 modal-header"> <h5 class="ms-2 modal-title">${title}</h5> <button type="button" class="me-1 btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="text-start modal-body"> ${m}<br/><br/> </div> </div> </div> </div>`). $("#messagemodal");modal('show'). $(document),on("click". ",me-1". function() { $("#messagemodal");modal('hide'). $("#modal");empty();}). } $("#clickme").click(function (event) { var code = $(".dropdown-menu").length+1 $(".task-point"):append(` <li class="list-group-item"> <img src="https.//img.icons8.com/color/48/000000.networking-manager?png" class="float-start" /> <div class="btn-group float-end"> <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button> <ul class="dropdown-menu dropdown-menu-lg-end"> <li><a data-bs-toggle="modal" href="#exampleModalToggle-${code}" role="button" class="dropdown-item" href="#">Edit ${code}</a></li> <li><a class="dropdown-item" href="#">Delete ${code}</a></li> <li><a class="dropdown-item" href="#">Run ${code}</a></li> </ul> </div> <div class="ms-5">This is ${code} item<br/> <small class="text-secondary">This is a ${code} item description</small> <div> <div class="modal fade" id="exampleModalToggle-${code}" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1" da> <div class="modal-dialog modal-fullscreen"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Create a file</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> What is Lorem Ipsum; </div> <div class="modal-footer"> <button class="btn btn-primary" onclick="showToast('Thanks for saving');">Save</button> </div> </div> </div> </div> </li> `). $(`#exampleModalToggle-${$(".dropdown-menu").length}`);modal("show"); }) </script> </body>

For Thank you popup faded backdrop, put below css in the style sheet对于 Thank you popup 褪色背景，在样式表中放在 css 下面

.modal-backdrop.fade.show + .modal-backdrop.show {
    z-index: 9999;
}

div#messagemodal {
    z-index: 99999;
}

If above css is not working for you then please use parent class name along with the css.如果以上 css 不适合您，请使用父 class 名称以及 css。

Bootstrap 模态不显示在另一个模态上

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-11-10 12:24:00

Bootstrap 模态不显示在另一个模态上

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-11-10 12:24:00

解决方案1
0 已采纳 2022-11-10 12:24:00