# alert-box

> Custom alert box plugin to replace the standard javascript alert function

Latest version **1.0.2** (published 2016-11-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install alert-box
pnpm add alert-box
yarn add alert-box
bun add alert-box
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2016-11-16 |
| First published | 2016-11-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ivorscott |
| Maintainers | ivorscott |

## Links

- npm: https://www.npmjs.com/package/alert-box
- npm.io page: https://npm.io/package/alert-box

## Recent versions

- 1.0.2 (latest) — 2016-11-16
- 1.0.1 — 2016-11-16
- 1.0.0 — 2016-11-15

## README

# Alert

Custom alert box plugin to replace the standard javascript alert function.

```javascript

// ===========================
// CUSTOM ALERT BOX
//
// This plugin is immediately instantiated on runtime and relies on being
// imported at the bottom of the document body.
//
// @param object The custom alert object or an empty object
// @method Alert.render() render the alert box
// @method Alert.ok() close the alert box
// @method createHtmlTemplate() Private method to create the html template
//
// @return object Alert
//
// @author icummings
// @author adamkhoury
// @source https://www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial
var Alert = (function (Alert) {

  // Build the html template if the alert-box doesn't exit yet

  if(!document.getElementById("alert-box")) createHtmlTemplate();

  // If the alert box is visible and "esc" is pressed, close the alert box

  document.onkeydown = function( event ) {
    if ( box.style.display == "block" && event.keyCode == 27 ) Alert.ok();
  };

 // ===========================
 // Render the message, center it on the screen and
 // style it according to the message type.
 //
 // @param string message The message hard-coded in the html
 // @param string type The type of message, [error, success, warning, notice]
 // @return void
 // ===========================
  Alert.render = function(message, type) {

      // If the alert type is missing default to "notice"

      var className = type || "notice";

      // Get the window dimensions

      var winW = window.innerWidth;
      var winH = window.innerHeight;

      // Get the alert box components

      var overlay = document.getElementById('overlay');
      var box = document.getElementById('box');

      // Build the overlay & the alert box style

      overlay.style.display = "block";
      overlay.style.height = winH+"px";
      box.style.top = "100px";
      box.style.display = "block";

      // Maintain 2 separate box widths for smaller and larger screens

      boxW = winW < 769 ? 360 : 560;

      // Center the alert box on the screen according to screen size

      box.style.left = (winW/2) - (boxW * .5)+"px";

      // Format the alert box message

      capitalizedName = className[0].toUpperCase() + className.substr(1);
      document.getElementById('box-header').innerHTML = capitalizedName;
      document.getElementById('box-body').innerHTML = message;
      document.getElementById('box-footer').innerHTML = '<button onclick="Alert.ok()">OK</button>';

      // Style the alert box according to its type, options are [error, success, warning, notice]

      document.getElementById('box-header').className = ""
      document.getElementById('box-header').classList.add(className);
  }

  // ===========================
  // Hide the alert box if the user clicked "OK".
  // @return void
  // ===========================
  Alert.ok = function(){
    document.getElementById('box').style.display = "none";
    document.getElementById('overlay').style.display = "none";
  }

  // ===========================
  // Build the html template.
  // We store the template here to keep the plugin centralized.
  // This makes it a lot easier to maintain.
  // @return void
  // ===========================
  function createHtmlTemplate() {
    var html =   '<div id="overlay"></div>'
                +'<div id="box">'
                + '<div>'
                +   '<div id="box-header"></div>'
                +   '<div id="box-body"></div>'
                +   '<div id="box-footer"></div>'
                + '</div>'
                +'</div>';
    var container = document.createElement("div");
    container.id = "alert-box";
    container.innerHTML = html
    document.body.appendChild(container);
  };

  return Alert;

})(Alert || {});
```

---
_Source: https://npm.io/package/alert-box · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._