Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- class ErrorModal {
- constructor() {
- this.modal = null;
- this.title = null;
- this.body = null;
- }
- init() {
- // Create the modal element and set its attributes
- this.modal = document.createElement("div");
- this.modal.classList.add("modal", "fade");
- this.modal.id = "errorModal";
- this.modal.tabIndex = "-1";
- this.modal.setAttribute("role", "dialog");
- this.modal.setAttribute("aria-labelledby", "errorModalLabel");
- this.modal.setAttribute("aria-hidden", "true");
- // Create the modal dialog element
- const modalDialog = document.createElement("div");
- modalDialog.classList.add("modal-dialog");
- modalDialog.setAttribute("role", "document");
- // Create the modal content element
- const modalContent = document.createElement("div");
- modalContent.classList.add("modal-content");
- // Create the modal header element
- const modalHeader = document.createElement("div");
- modalHeader.classList.add("modal-header");
- // Create the modal title element
- this.title = document.createElement("h5");
- this.title.classList.add("modal-title");
- this.title.id = "errorModalLabel";
- this.title.textContent = "Error";
- // Add the title element to the header
- modalHeader.appendChild(this.title);
- // Create the close button element
- const closeButton = document.createElement("button");
- closeButton.classList.add("btn-close");
- closeButton.setAttribute("type", "button");
- closeButton.setAttribute("data-bs-dismiss", "modal");
- closeButton.setAttribute("aria-label", "Close");
- // Add the close button to the header
- modalHeader.appendChild(closeButton);
- // Add the header to the content
- modalContent.appendChild(modalHeader);
- // Create the modal body element
- this.body = document.createElement("div");
- this.body.classList.add("modal-body");
- // Add the body to the content
- modalContent.appendChild(this.body);
- // Add the content to the dialog
- modalDialog.appendChild(modalContent);
- // Add the dialog to the modal
- this.modal.appendChild(modalDialog);
- // Add the modal to the document
- document.body.appendChild(this.modal);
- }
- show(code, message) {
- // Update the title and body of the modal
- this.title.textContent = `Error ${code}`;
- this.body.textContent = message;
- // Show the modal
- const modal = new bootstrap.Modal(document.getElementById("errorModal"));
- modal.show();
- }
- }
- (function() {
- // code to run automatically when script is loaded
- console.log("Hello, world!");
- const errorModal = new ErrorModal();
- errorModal.init();
- // Display the error in the modal
- errorModal.show(1021, "Ciao, come va li?");
- })();
- //__________________________________________________________________________________
- <div class="container shadow min-vh-100 py-2">
- <div class="row">
- <div class="col">
- <h2 class="font-weight-light">Hello Bootstrap 5 😊</h2>
- <p>
- This is a Bootstrap 5 starter example snippet!
- </p>
- </div>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement