Advertisement
cydside

Untitled

May 15th, 2023
937
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. class ErrorModal {
  2.   constructor() {
  3.     this.modal = null;
  4.     this.title = null;
  5.     this.body = null;
  6.   }
  7.  
  8.   init() {
  9.     // Create the modal element and set its attributes
  10.     this.modal = document.createElement("div");
  11.     this.modal.classList.add("modal", "fade");
  12.     this.modal.id = "errorModal";
  13.     this.modal.tabIndex = "-1";
  14.     this.modal.setAttribute("role", "dialog");
  15.     this.modal.setAttribute("aria-labelledby", "errorModalLabel");
  16.     this.modal.setAttribute("aria-hidden", "true");
  17.  
  18.     // Create the modal dialog element
  19.     const modalDialog = document.createElement("div");
  20.     modalDialog.classList.add("modal-dialog");
  21.     modalDialog.setAttribute("role", "document");
  22.  
  23.     // Create the modal content element
  24.     const modalContent = document.createElement("div");
  25.     modalContent.classList.add("modal-content");
  26.  
  27.     // Create the modal header element
  28.     const modalHeader = document.createElement("div");
  29.     modalHeader.classList.add("modal-header");
  30.  
  31.     // Create the modal title element
  32.     this.title = document.createElement("h5");
  33.     this.title.classList.add("modal-title");
  34.     this.title.id = "errorModalLabel";
  35.     this.title.textContent = "Error";
  36.  
  37.     // Add the title element to the header
  38.     modalHeader.appendChild(this.title);
  39.  
  40.     // Create the close button element
  41.     const closeButton = document.createElement("button");
  42.     closeButton.classList.add("btn-close");
  43.     closeButton.setAttribute("type", "button");
  44.     closeButton.setAttribute("data-bs-dismiss", "modal");
  45.     closeButton.setAttribute("aria-label", "Close");
  46.  
  47.     // Add the close button to the header
  48.     modalHeader.appendChild(closeButton);
  49.  
  50.     // Add the header to the content
  51.     modalContent.appendChild(modalHeader);
  52.  
  53.     // Create the modal body element
  54.     this.body = document.createElement("div");
  55.     this.body.classList.add("modal-body");
  56.  
  57.     // Add the body to the content
  58.     modalContent.appendChild(this.body);
  59.  
  60.     // Add the content to the dialog
  61.     modalDialog.appendChild(modalContent);
  62.  
  63.     // Add the dialog to the modal
  64.     this.modal.appendChild(modalDialog);
  65.  
  66.     // Add the modal to the document
  67.     document.body.appendChild(this.modal);
  68.   }
  69.  
  70.   show(code, message) {
  71.     // Update the title and body of the modal
  72.     this.title.textContent = `Error ${code}`;
  73.     this.body.textContent = message;
  74.  
  75.     // Show the modal
  76.     const modal = new bootstrap.Modal(document.getElementById("errorModal"));
  77.     modal.show();
  78.   }
  79. }
  80.  
  81. (function() {
  82.   // code to run automatically when script is loaded
  83.   console.log("Hello, world!");
  84.  
  85. const errorModal = new ErrorModal();
  86. errorModal.init();
  87.  
  88.     // Display the error in the modal
  89. errorModal.show(1021, "Ciao, come va li?");
  90.  
  91. })();
  92.  
  93. //__________________________________________________________________________________
  94.  
  95. <div class="container shadow min-vh-100 py-2">
  96.     <div class="row">
  97.         <div class="col">
  98.             <h2 class="font-weight-light">Hello Bootstrap 5 😊</h2>
  99.             <p>
  100.                 This is a Bootstrap 5 starter example snippet!
  101.             </p>
  102.         </div>
  103.     </div>
  104. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement