Basic Vanilla JavaScript Alert Modal Window

Category: Javascript , Modal & Popup | July 19, 2023
Author:lecoa
Views Total:409 views
Official Page:Go to website
Last Update:July 19, 2023
License:MIT

Preview:

Basic Vanilla JavaScript Alert Modal Window

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)

You Might Be Interested In:


Leave a Reply