<div class="msgbox-message-container">
  <h1>Responsive Message Box</h1>
  <h3>Using Native Javascript class</h3>
  <p><button id="msgboxPersistent" class="msgbox-message-button" type="button">Show persistent</button></p>
  <p><button id="msgboxShowMessage" class="msgbox-message-button" type="button">Show non-persistent</button></p>
  <p><button id="msgboxHiddenClose" class="msgbox-message-button" type="button">Hidden close button</button></p>
</div>
<div id="msgbox-area" class="msgbox-area"></div>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");

/*****************************/
/* MESSAGE BOX RELATED CLASS */
/*          (START)          */
/*****************************/

$msgbox-area-width-l: 480px;

$msgbox-area-y-pos: 15px;
$msgbox-area-x-s: 20px;
$msgbox-area-x-m: 80px;
$msgbox-area-x-l: 15px;

$msgbox-box-color: #ffffff;
$msgbox-box-background-color: rgba(#000000, 0.8);
$msgbox-box-padding: 18px 20px;
$msgbox-box-margin: 15px;
$msgbox-box-border-radius: 12px;
$msgbox-box-box-shadow: 0 10px 15px rgba(#000000, 0.65);
$msgbox-box-transition-time: 300ms;

$msgbox-close-color: #ffffff;
$msgbox-close-margin: 20px;
$msgbox-close-transition-time: 225ms;

$msgbox-close-hover-text-shadow: 0 0 3px #efefef;

.msgbox-area {
  max-height: 100%;
  position: fixed;
  bottom: $msgbox-area-y-pos;
  left: $msgbox-area-x-s;
  right: $msgbox-area-x-s;
  .msgbox-box {
    font-size: inherit;
    color: $msgbox-box-color;
    background-color: $msgbox-box-background-color;
    padding: $msgbox-box-padding;
    margin: 0 0 $msgbox-box-margin;
    display: flex;
    align-items: center;
    position: relative;
    border-radius: $msgbox-box-border-radius;
    box-shadow: $msgbox-box-box-shadow;
    transition: opacity $msgbox-box-transition-time ease-in;
    &.msgbox-box-hide {
      opacity: 0;
    }
    &:last-child {
      margin: 0;
    }
  }
  .msgbox-content {
    flex-shrink: 1;
  } 
  .msgbox-close {
    color: $msgbox-close-color;
    font-weight: bold;
    text-decoration: none;
    margin: 0 0 0 $msgbox-close-margin;
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    transition: text-shadow $msgbox-close-transition-time ease-out;
    &:hover {
      text-shadow: $msgbox-close-hover-text-shadow;
    }
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .msgbox-area {
    left: $msgbox-area-x-m;
    right: $msgbox-area-x-m;
  }
}

@media (min-width: 768px) {
  .msgbox-area {
    width: $msgbox-area-width-l;
    height: 0;
    top: $msgbox-area-y-pos;
    left: auto;
    right: $msgbox-area-x-l;
  }
}

/*****************************/
/* MESSAGE BOX RELATED CLASS */
/*           (END)           */
/*****************************/

$button-color: #1476ff;

body {
  font-family: "Open Sans", sans-serif;
}

.msgbox-area {
  font-size: 16px;
}

.msgbox-message-container {
  text-align: center;
  width: 100vw;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  h1, h3 {
    margin: 10px 20px;
  }
  p {
    margin: 5px 20px;
  }
}

.msgbox-message-button {
  font-size: 18px;
  font-weight: bold;
  font-family: inherit;
  color: white;
  background-color: $button-color;
  width: 250px;
  border: solid 2px darken($button-color, 10%);
  padding: 10px 20px;
  cursor: pointer;
  outline: none;
  box-shadow: 0 5px darken($button-color, 10%);
  transition:
    background-color 100ms ease-out,
    box-shadow 100ms ease-out,
    transform 100ms ease-out;
  &:hover,
  &:focus,
  &:active {
    background-color: lighten($button-color, 5%);
  }
  &:active {
    background-color: darken($button-color, 5%);
    box-shadow: 0 0 darken($button-color, 10%);
    transform: translateY(5px);
  }
}
View Compiled
class MessageBox {
  constructor(id, option) {
    this.id = id;
    this.option = option;
  }
  
  show(msg, label = "CLOSE", callback = null) {
    if (this.id === null || typeof this.id === "undefined") {
      // if the ID is not set or if the ID is undefined
      
      throw "Please set the 'ID' of the message box container.";
    }
    
    if (msg === "" || typeof msg === "undefined" || msg === null) {
      // If the 'msg' parameter is not set, throw an error
      
      throw "The 'msg' parameter is empty.";
    }
    
    if (typeof label === "undefined" || label === null) {
      // Of the label is undefined, or if it is null
      
      label = "CLOSE";
    }
    
    let option = this.option;

    let msgboxArea = document.querySelector(this.id);
    let msgboxBox = document.createElement("DIV");
    let msgboxContent = document.createElement("DIV");
    let msgboxClose = document.createElement("A");
    
    if (msgboxArea === null) {
      // If there is no Message Box container found.
      
      throw "The Message Box container is not found.";
    }

    // Content area of the message box
    msgboxContent.classList.add("msgbox-content");
    msgboxContent.innerText = msg;
    
    // Close burtton of the message box
    msgboxClose.classList.add("msgbox-close");
    msgboxClose.setAttribute("href", "#");
    msgboxClose.innerText = label;
    
    // Container of the Message Box element
    msgboxBox.classList.add("msgbox-box");
    msgboxBox.appendChild(msgboxContent);

    if (option.hideCloseButton === false
        || typeof option.hideCloseButton === "undefined") {
      // If the hideCloseButton flag is false, or if it is undefined
      
      // Append the close button to the container
      msgboxBox.appendChild(msgboxClose);
    }

    msgboxArea.appendChild(msgboxBox);

    msgboxClose.addEventListener("click", (evt) => {
      evt.preventDefault();
      
      if (msgboxBox.classList.contains("msgbox-box-hide")) {
        // If the message box already have 'msgbox-box-hide' class
        // This is to avoid the appearance of exception if the close
        // button is clicked multiple times or clicked while hiding.
        
        return;
      }

      this.hide(msgboxBox, callback);
    });

    if (option.closeTime > 0) {
      this.msgboxTimeout = setTimeout(() => {
        this.hide(msgboxBox, callback);
      }, option.closeTime);
    }
  }
  
  hide(msgboxBox, callback) {
    if (msgboxBox !== null) {
      // If the Message Box is not yet closed

      msgboxBox.classList.add("msgbox-box-hide");
    }
    
    msgboxBox.addEventListener("transitionend", () => {
      if (msgboxBox !== null) {
        // If the Message Box is not yet closed

        msgboxBox.parentNode.removeChild(msgboxBox);

        clearTimeout(this.msgboxTimeout);
        
        if (callback !== null) {
          // If the callback parameter is not null
          callback();
        }
      }
    });
  }
}

let msgboxShowMessage = document.querySelector("#msgboxShowMessage");
let msgboxHiddenClose = document.querySelector("#msgboxHiddenClose");

// Creation of Message Box class, and the sample usage
let msgboxbox = new MessageBox("#msgbox-area", {
  closeTime: 10000,
  hideCloseButton: false
});
let msgboxboxPersistent = new MessageBox("#msgbox-area", {
  closeTime: 0
});
let msgboxNoClose = new MessageBox("#msgbox-area", {
  closeTime: 5000,
  hideCloseButton: true
});

document.querySelector("#msgboxPersistent").addEventListener("click", function() {
  msgboxboxPersistent.show("Hello! I am a persistent message box! I will hide myself if you close me.");
});

msgboxShowMessage.addEventListener("click", function() {
  msgboxbox.show("Hello! I am a non-persistent message box! I will hide myself automatically after 5 seconds, but you may also close me.", null);
});

msgboxHiddenClose.addEventListener("click", function() {
  msgboxNoClose.show("Hello! My close button is hidden, but I will close myself after 5 seconds.");
});

// Show the message at the beginning
msgboxboxPersistent.show(
  "Hello! I am a message box! I will appear on the page load period. I also have a callback. You may check on 'Console' to see.",
  "CALLBACK", () => {
  console.log("I am the callback! Of course, you may add various javascript codes to make the callback function colourful.");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.