如何通过模式向用户显示自定义消息？

Question

当我尝试在模式中实现用户消息时，我遇到了错误。

 function foo(title, description) { var myModalErrorMessage; $("#customErrorMessageTitle").text(title) $("#customErrorMessageDescription").html(description) myModalErrorMessage = new bootstrap.Modal(document.getElementById("customErrorMessage"), {}); myModalErrorMessage.show(); } foo("my title 1", "my description 1") foo("my title 2", "my description 2")

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <div class="modal" id="customErrorMessage" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="customErrorMessageTitle" style="color:red; font-weight:bold"></h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body" id="customErrorMessageDescription" style="color:red;"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">close</button> </div> </div> </div> </div>

同样在我关闭模式后，褪色的背景仍然存在。

X 消息应该显示给用户（取决于我调用 foo function 并传递标题和描述的次数）。

谢谢。

Answer 1

您可以使用<template>来呈现您的自定义模态 windows。有关更多详细信息，请查看代码片段评论。

您的问题是您两次调用同一实例（如示例），因此您将模态的文本内容覆盖为最新调用的文本，并且当使用modal.show()打开模态时，BS5 会为每个模态生成div.modal-backdrop 。 所以，你有一个模式 window 有两个背景，当关闭 window 时，你关闭了这个实例，BS5 删除了相关的背景。 另一个背景将保留。

例如，您必须使用模板标签生成单独的模态 windows。

另外，BS5 在没有 jQuery 的情况下也能工作，所以这里不需要使用它。

 const foo = (title, description) => { // root anchor to place modals const body = document.querySelector('body'); // template with HTML to render const template = document.querySelector('#modalTemplate'); // prepare clone to render content const clone = template.content.cloneNode(true); // searching for main tags to work with const modalNode = clone.querySelector('.modal'); const titleNode = clone.querySelector('.modal-title'); const textNode = clone.querySelector('.modal-body'); // create modal id and label const timestamp = + new Date(); // const modalId = `modal-${timestamp}`; // id is optional const modalLabel = `modal-label-${timestamp}`; // placing content into tags // modalNode.id = modalId; // id is optional modalNode.setAttribute('aria-labelledby', modalLabel); titleNode.id = modalLabel; titleNode.textContent = title; // insert text into body textNode.textContent = description; // create BS modal modal = new bootstrap.Modal(modalNode, {}); // show modal modal.show(); // rendering modal in DOM body.appendChild(clone); } // call functions to render custom modal foo("my title 1", "my description 1"); foo("my title 2", "my description 2");

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <.-- main template block --> <template id="modalTemplate"> <.-- id and label for.modal will be added by JS --> <div class="modal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <!-- id and text content for .modal-title will be added by JS --> <h5 class="modal-title text-danger fw-bold"></h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <!-- text content for .modal-body will be added by JS --> <div class="modal-body text-danger"></div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">close</button> </div> </div> </div> </div> </template>

Answer 2

发生这种情况是因为您在同一视图上多次打开模态，这就是为什么在视图上多次创建背景，但是当您关闭视图时它只隐藏第一个。 你可以使用$('.modal-backdrop').remove(); 隐藏所有活动背景的代码。 如果你想在同一页面上打开多个模式，你可以在这里查看演示

 function foo(title, description) { var myModalErrorMessage; $("#customErrorMessageTitle").text(title) $("#customErrorMessageDescription").html(description) myModalErrorMessage = new bootstrap.Modal(document.getElementById("customErrorMessage"), {}); myModalErrorMessage.show(); } function closeModal(){ $("#customErrorMessage").modal('hide'); $('.modal-backdrop').remove(); } foo("my title 1", "my description 1") foo("my title 2", "my description 2")

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <div class="modal" id="customErrorMessage" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="customErrorMessageTitle" style="color:red; font-weight:bold"></h5> <button type="button" class="btn-close" onclick="closeModal()" aria-label="Close"></button> </div> <div class="modal-body" id="customErrorMessageDescription" style="color:red;"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" onclick="closeModal()">close</button> </div> </div> </div> </div>