Simple notification

Templates


author small image 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

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.

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.

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)


Post a comment

I promise, I keep it clean *

Comments

No Comments to show

Alert SVG Cookie Consent

This website uses cookies and similar technologies, to enhance your browsing experience and provide personalized recommendations. By continuing to use our website, you agree to our Privacy policy.