Nice Alert Message

Learn how to create Nice Alert Message using html, css and/or js.

<h1>Alert Message Demo</h1>

<ul class="list unstyled">
  <li><a href="#" onclick="Alert.success('Success! This alert box indicates a successful or positive action. ','Success',{displayDuration: 3000, pos: 'top'})">Success Alert</a></li>
  
  <li><a href="#" onclick="Alert.info('Info! This alert box indicates a neutral informative change or action. ','Info',{displayDuration: 3000})">Info Alert</a></li>
  
  <li><a href="#" onclick="Alert.error('error! This alert box indicates a dangerous or potentially negative action. ','Error',{displayDuration: 3000})">Error Alert</a></li>
  
  <li><a href="#" onclick="Alert.warning('Warning! This alert box indicates a warning that might need attention.','Warning',{displayDuration: 3000})">Warning Alert</a></li>
  
<li><a href="#" onclick="Alert.trash('Delete! This alert box indicates a dangerous or potentially negative action. ','Delete',{displayDuration: 3000})">Delete Alert</a></li>
  
  <li> <br><br><br> </li>
  
</ul>
<style>
body {
  font-family: sans-serif;
  background-color: #fff;
  
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.alert-message {line-height:20px; font-size:15px;padding-bottom: 12px;}
h1{color:#e35154 !important; font-size:18px; margin-left:20px; margin-bottom:20px;font-weight:700; text-transform: uppercase;}

body a, body #test {
  color: #fff;
}

.unstyled {
  margin: 0;
  list-style: none;
}
.unstyled a, .unstyled #test {
  width: 120px;
  text-decoration: none;
  padding: .5em 1em;
  background-color: #213347;
  border-radius: 4px;
  display: block;
  margin-bottom: .5em;
  font-size:15px;
  font-weight:300;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.unstyled a:hover, .unstyled #test:hover {
  background-color: #f25c5d;
}

.cf, .alert {
  *zoom: 1;
}
.cf:before, .alert:before, .cf:after, .alert:after {
  display: table; 
  content: "";
  line-height: 0;
}
.cf:after, .alert:after {
  clear: both;
}

#alerts {
  width: 400px;
  top: 12px;
  right: 50px;
  position: fixed;
  z-index: 9999;
  list-style: none;
}

.alert {
  width: 100%;
  margin-bottom: 8px;
  display: block;
  position: relative;
  border-left: 4px solid;
  right: -50px;
  opacity: 0;
  line-height: 1;
  padding: 0;
  transition: right 400ms, opacity 400ms, line-height 300ms 100ms, padding 300ms 100ms;
  display: table;
}

.alert:hover {
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.open {
  right: 0;
  opacity: 1;
  line-height: 2;
  padding: 3px 15px;
  transition: line-height 200ms, padding 200ms, right 350ms 200ms, opacity 350ms 200ms;
}

.alert-title {
  font-weight: bold;
}

.alert-block {
  width: 80%;
  width: -webkit-calc(100% - 10px);
  width: calc(100% - 10px);
  text-align: left;
}
.alert-block em, .alert-block small {
  font-size: .75em;
  opacity: .75;
  display: block;
}

.alert i {
  font-size: 2em;
  width: 1.5em;
  max-height: 48px;
  top: 50%;
  margin-top: -12px;
  display: table-cell;
  vertical-align: middle;
}

.alert-success {
  color: #fff;
  border-color: #539753;
  background-color: #8fbf2f;
}

.alert-error {
  color: #fff;
  border-color: #dc4a4d;
  background-color: #f25c5d;
}

.alert-trash {
  color: #fff;
  border-color: #dc4a4d;
  background-color: #f25c5d;
}

.alert-info {
  color: #fff;
  border-color: #076d91;
  background-color: #3397db;
}

.alert-warning {
  color: #fff;
  border-color: #dd6137;
  background-color: #f7931d;
}

</style>

trash = function(message, title, options) {
    return alert("trash", message, title, "fa fa-trash-o", options);
  };

success = function(message, title, options) {
    return alert("success", message, title, "fa fa-check-circle", options);
  };
  alert = function(type, message, title, icon, options) {
    var alertElem, messageElem, titleElem, iconElem, innerElem, _container;
    if (typeof options === "undefined") {
      options = {};
    }
    options = $.extend({}, Alert.defaults, options);
    if (!_container) {
      _container = $("#alerts");
      if (_container.length === 0) {
        _container = $("<ul>").attr("id", "alerts").appendTo($("body"));
      }
    }
    if (options.width) {
      _container.css({
        width: options.width
      });
    }
    alertElem = $("<li>").addClass("alert").addClass("alert-" + type);
    setTimeout(function() {
      alertElem.addClass('open');
    }, 1);
    if (icon) {
      iconElem = $("<i>").addClass(icon);
      alertElem.append(iconElem);
    }
    innerElem = $("<div>").addClass("alert-block");
    //innerElem = $("<i>").addClass("fa fa-times");
    alertElem.append(innerElem);
    if (title) {
      titleElem = $("<div>").addClass("alert-title").append(title);
      innerElem.append(titleElem);
      
    }
    if (message) {
      messageElem = $("<div>").addClass("alert-message").append(message);
      //innerElem.append("<i class="fa fa-times"></i>");
      innerElem.append(messageElem);
      //innerElem.append("<em>Click to Dismiss</em>");
//      innerElemc = $("<i>").addClass("fa fa-times");

}
    if (options.displayDuration > 0) {
      setTimeout((function() {
        leave();
      }), options.displayDuration);
    } else {
      innerElem.append("<em>Click to Dismiss</em>");
    }
    alertElem.on("click", function() {
      leave();
    });

})(Alert || (Alert = {}));

this.Alert = Alert;

$('#test').on('click', function() {
  Alert.info('Message');
});
</script>

Nice Alert Message

Random HTML Example Codes: