How can I display custom messages to the user via modals?-CodePudding

When I try to implement user messages in modals, I encounter bugs.

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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div  id="customErrorMessage" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div >
    <div >
      <div >
        <h5  id="customErrorMessageTitle" style="color:red; font-weight:bold"></h5>
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div  id="customErrorMessageDescription" style="color:red;">
      </div>
      <div >
        <button type="button"  data-bs-dismiss="modal">close</button>
      </div>
    </div>
  </div>
</div>

also after I close the modal, the faded background is remained.

X messages should be displayed to the user (depends how many times I call my foo function and pass it title and description).

Thanks.

CodePudding user response：

You can use <template> to render your custom Modal windows. For more details, take a look on Code Snippet comments.

Your problem is you calling same instance twice (like in example), so you override text content of modal to text from latest call, and when opening modal with modal.show(), BS5 generates div.modal-backdrop to each modal. So, you have one modal window with two backdrops and when closing window, you closing this one instance and BS5 removing related backdrop. The other backdrop will stay.

You have to generate separate modal windows, for example, with template tag.

Also, BS5 works without jQuery, so no needs to use it here.

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}`;
  const modalLabel = `modal-label-${timestamp}`;
  
  // placing content into tags
  modalNode.id = modalId;
  modalNode.setAttribute('aria-labelledby', modalLabel);
  
  titleNode.id = modalLabel;
  titleNode.textContent = title;
  
  textNode.textContent = description;

  // rendering modals in DOM
  body.appendChild(clone);

  // create BS modals
  const modalBlock = document.querySelector(`#${modalId}`);
  modal = new bootstrap.Modal(modalBlock, {});

  // show modal
  modal.show();
}

// call functions to render custom modal
foo("my title 1", "my description 1");
foo("my title 2", "my description 2");

.modal-title {
  color: red;
  font-weight: bold;
}

.modal-body {
  color: red;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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  tabindex="-1" aria-hidden="true">
    <div >
      <div >
        <div >
          <!-- id and text content for .modal-title will be added by JS -->
          <h5 ></h5>
          <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <!-- text content for .modal-body will be added by JS -->
        <div ></div>
        <div >
          <button type="button"  data-bs-dismiss="modal">close</button>
        </div>
      </div>
    </div>
  </div>
</template>

CodePudding user response：

This happening because you are opening modal multiple times on same view, that's why the background is created multiples times on the view, but when you close the view it only hides the first one. you can use $('.modal-backdrop').remove(); code to hide all active backgrounds. If you want to open multiple modals on same page you can view Demo here

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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div  id="customErrorMessage" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div >
    <div >
      <div >
        <h5  id="customErrorMessageTitle" style="color:red; font-weight:bold"></h5>
        <button type="button"  onclick="closeModal()" aria-label="Close"></button>
      </div>
      <div  id="customErrorMessageDescription" style="color:red;">
      </div>
      <div >
        <button type="button"  onclick="closeModal()">close</button>
      </div>
    </div>
  </div>
</div>