Simple notification

Siva Kishore G

Posted : 11 Dec 2021
Modified : 06 Jun 2022

Beginner Developers

Top bar

A full width bar notification appearing on the top of the page and then disappearing in 3 seconds. For bottom bar, in css, change top:0 to bottom:0

Requires JQuery

View code

    <div id="barNotification"></div>
<button class="btn btn-sm btn-outline-info" onclick='barNotif("Congratulations", "success")' >Show Notification</button>

    #barNotification {
position: fixed;
width:100%;
top:0;
left: 0;
z-index: 1030;
text-align:center;
height: 30px;
line-height: 30px;
color : #fff;
text-transform : uppercase;
font-size:12px;
font-weight: 500;
letter-spacing : 1px;
display: none
}

    var ba = $('#barNotification')
function barNotif(msg, typ) {
ba.text(msg)
if (typ === 'error')
  ba.css("background-color", "red")
else
  ba.css("background-color", "green")
ba.show()
setTimeout(function() {
  ba.hide()
}, 3000)
}

Sliding Notification

This notification will slide from right to left at the top right corner. To change the placement of the notification can be adjusted using the CSS values top:0 & right:0. Adjust z-index value if your popup is overlapped by any other element. Stop using unnecessary frameworks that will only overload your webpage with unnecessary code.

Requires font awesome

View code

    #slideNotification.isError {
  background : #f16565;
}
#slideNotification.isSuccess {
  background : #74b94a;
}
#slideNotification {
  line-height:1.5em;
  z-index:999999;
  max-width:320px;
  width:100%;
  position : fixed;
  top:10px;
  right : 0;
  border-radius:  8px 0px 0px 8px;
  padding:4px 12px;
  color: #fff;
  transform:translateX(100%);
  transition: all 400ms ease-out;
}
#slideNotification.slider {
  transform:translateX(0%);
}
#slideNotification .flexMain {
  display:flex;
  align-items : center
}
#slideNotification #notifHeading {
  font-size:16px;
  font-weight:bold;
  text-transform : uppercase;
}
#slideNotification #notifText {
  font-size:14px;
}
#slideNotification #notifType {
  font-size:2em
}
#slideNotification .fa-times {
  cursor:pointer;
  float:right;
  margin-top:12px;
}
#slideNotification #errorIcon, #slideNotification #successIcon {
  display:none
}
#slideNotification.isError #errorIcon { display:block }
#slideNotification.isError #successIcon { display:none }
#slideNotification.isSuccess #errorIcon { display : none }
#slideNotification.isSuccess #successIcon { display:block }

    <div id="slideNotification">
  <i class="fas fa-times" onclick="closeNotification()"></i>
  <div class="flexMain">
    <div class=" p-2" id="notifType">
      <i class="fas fa-exclamation-circle" id="errorIcon"></i>
      <i class="fas fa-check-circle" id="successIcon"></i>
    </div>
    <div class="p-2">
      <div id="notifHeading"></div>
      <div id="notifText">
      </div>
    </div>
  </div>
</div>

    var slideNotification = document.getElementById('slideNotification')
var notifTimeout = null
function popupNotif(heading,text,msgType,timeout){
  document.getElementById('notifHeading').innerText = heading
  document.getElementById('notifText').innerText = text
  slideNotification.className = `slider ${msgType}`
  notifTimeout = setTimeout( function(){
    slideNotification.className = ''
  }, timeout*1000 )
}
function closeNotification(){
  if(notifTimeout !== null) clearTimeout(notifTimeout)
  slideNotification.className = ''
}
/* popupNotif(HEADING,TEXT, "isError" OR "isSuccess", TIMEOUT_SECONDS) */
popupNotif("error","please set this","isError",2)

Popup (Modal) Notification

This is one notification custom built without using any frameworks like bootstrap or tailwind. Adjust the z-index value if your popup is overlapped by any other element. Make sure it has the highest order.

Requires font awesome

View code

#overlay {
  background:rgba(0,0,0,0.7);
  position:fixed;
  z-index:9999;
  height:100vh;
  width:100vw;
  left:0;
  top:0;
  display:flex;
  align-items:center;
  text-align:center;
  visibility:hidden;

}
.popup {
  margin: 0 auto;
  width:100%;
  max-width:320px;
  background:#fff;
  border-radius:4px;
  text-align:center;
  transition : all 100ms ease-in;
}

#overlay.popupIntro {
  visibility:visible
}
.popupIntro > .popup {
  transform:translateY(-25%);
}

.popup-title {
  padding:12px;
  padding-top:18px;
  font-size:24px;
}

.popup-body p{
  padding:12px;
  line-height:1.4em
}
.popup-footer {
  display:flex;
}
.popup-footer button {
  height:48px;
  background:none;
  padding:4px;
  border:none;
  width:100%;
  display:block;
}
#okButton {
  background : #23ad97;
  border-radius:0px 0px 0px 4px;
}
#cancelButton {
  background:#dfdfdf;
  border-radius:0px 0px 4px 0px;
}

<div id="overlay">
  <div class="popup">
    <div class="popup-title"><span id="insertTitle"></span></div>
    <div class="popup-body">
      <p id="insertMessage"></p>
    </div>
    <div class="popup-footer">
      <button id="okButton">OK</button>
      <button id="cancelButton" onclick="removePopup()">Cancel</button>
    </div>
  </div>
</div>

function popup(title,message){
  document.getElementById('overlay').className = "popupIntro"
  document.getElementById('insertTitle').innerText = title
  document.getElementById('insertMessage').innerText = message
}
function removePopup(){
  document.getElementById('overlay').className = ""
}
setTimeout( function(){
  popup("Welcome","Something nice about this popup")
}, 1000)