Alert Message in HTML on Button Click

This code snippet helps you to create an alert message button. It defines an immediately invoked function that handles the rendering of different types of messages (success, danger, warning, and info). The message box is cached and the message duration is set to two seconds. Each button is cached and assigned an event listener that triggers the message rendering function when clicked. A timer is set to clear the message after the message duration has passed.

Finally, hide() function is called to remove the appropriate classes from the message box and the timer is set to hide the message when the message box’s transition ends.

How to Create Alert Message In Html On Button Click

Create the HTML structure for the alert message button as follows:

<!-- message -->
<div class="msg animate slide-in-down"></div>
<!-- end message -->

<div class="bottom">
<div class="mg">
  <button class="btn btn-success">
    Click Me
  </button>
  <button class="btn btn-danger">
    Click Me
  </button>
  <button class="btn btn-warning">
    Click Me
  </button>
  <button class="btn btn-info">
    Click Me
  </button>
</div>
</div>

Now, style the alert message button using the following CSS styles:

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.bottom{
background-color: black;
width: 100%;
height: 100vh;
margin: auto;
}
.bottom > .mg{
margin: auto;
margin-top: 390px;
margin-left: 390px;
}
body {
  background-color: #1c1c1c;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  border: none;
  background-color: transparent;
}

.btn {
  padding: 10px 20px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  transition: all 0.2s;
}
.btn:hover {
  cursor: pointer;
}

.btn-success {
  color: #0a2c12;
  border-color: #1e7e34;
  background-color: #28a745;
}
.btn-success:hover {
  background-color: #1e7e34;
  color: white;
}

.btn-danger {
  color: #66121a;
  border-color: #bd2130;
  background-color: #dc3545;
}
.btn-danger:hover {
  background-color: #bd2130;
  color: white;
}

.btn-warning {
  color: #6d5200;
  border-color: #d39e00;
  background-color: #ffc107;
}
.btn-warning:hover {
  background-color: #d39e00;
  color: white;
}

.btn-info {
  color: #062a30;
  border-color: #117a8b;
  background-color: #17a2b8;
}
.btn-info:hover {
  background-color: #117a8b;
  color: white;
}

/* message */
.msg {
  position: fixed;
  top: 40px;
  left: 50%;
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.05);
}

.msg-success {
  background-color: #28a745;
}

.msg-warning {
  color: #6d5200;
  background-color: #ffc107;
}

.msg-danger {
  background-color: #dc3545;
}

.msg-info {
  background-color: #17a2b8;
}

/*fade*/
.animate {
  opacity: 0;
  transition: all 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animate.active {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%);
}

.slide-in-down {
  transform: translateY(-100%) translateX(-50%);
}

Load the following scripts before closing the body tag:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

Finally, add the following JavaScript function for its functionality:

(function(){

    // data
    var clear;
    var msgDuration = 2000; // 2 seconds
    var $msgSuccess = 'Great job! Well done :)';
    var $msgDanger  = 'Careful with that!';
    var $msgWarning = 'Try that again and see what happens';
    var $msgInfo    = 'This is a friendly reminder';

    // cache DOM
    var $msg        = $('.msg');
    var $btnSuccess = $('.btn-success');
    var $btnDanger  = $('.btn-danger');
    var $btnWarning = $('.btn-warning');
    var $btnInfo    = $('.btn-info');

    // render message
    function render(message){

        hide();

        switch (message) {
            case 'success':
                $msg.addClass('msg-success active').text($msgSuccess);
                break;
            case 'danger':
                $msg.addClass('msg-danger active').text($msgDanger);
                break;
            case 'warning':
                $msg.addClass('msg-warning active').text($msgWarning);
                break;
            case 'info':
                $msg.addClass('msg-info active').text($msgInfo);
                break;
        }
    }

    function timer(){
        clearTimeout(clear);
        clear = setTimeout(function(){
            hide();
        }, msgDuration)
    }

    function hide(){
        $msg.removeClass('msg-success msg-danger msg-warning msg-info active');
    }

    // bind events
    $btnSuccess.on('click', function(){render('success');});
    $btnDanger .on('click', function(){render('danger');});
    $btnWarning.on('click', function(){render('warning');});
    $btnInfo   .on('click', function(){render('info');});
    $msg       .on('transitionend', timer);

})();

That’s all! hopefully, you have successfully created alert message in Html on button click. If you have any questions or suggestions, feel free to comment below.