Basic Vanilla JavaScript Alert Modal Window

Preview:

Description:

An extremely lightweight JavaScript library for creating modal-style alert popups with ease.

See Also: Minimal Alert & Confirm Modal JS JavaScript – Prompt.js

How to use it:

1. Import the stylesheet modal.css and script alert.js into the document.

<link rel="stylesheet" href="./modal.css">
<script src="./alert.js"></script>

2. Create the HTML for the alert modal.

<div class="modal" id="modal-alert">
  <div class="modal-overlay" tabindex="-1">
    <div class="modal-container">
      <div class="modal-header">
        <h2 class="modal-title" id="modal-alert-title">
          Error
        </h2>
      </div>
      <div class="modal-text">
        <p id="modal-alert-content">
          Something went wrong.
        </p>
      </div>
      <div class="modal-buttons">
        <button class="modal-button" id="modal-button-primary" onclick="document.getElementById('modal-alert').style.display = 'none';">Close</button>
      </div>
    </div>
  </div>
</div>

3. Display an alert modal with the show_alert method. Available parameters:

• title: Alert title
• message: Alert message
• btnHide: Whether to show the close button
• btnLabel: Label text for the close button

// show_alert(title, message, btnHide = false, btnLabel = "Close")
show_alert('No close button', 'No way to close alert, refresh tab.', true)