如何通過模式向用戶顯示自定義消息？

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>