jQuery - Show simple message box when clicked?

Question

How to show message box and close it when clicked an element using jQuery?
It is something like to show a success message when clicked a button.

Answer 1

HTML, CSS, JS:
(The message box will be shown on top of the cursor and aligned at the center.)

$("body").append("<div class=\"msg\">Message to be shown</div>");
$('button.msg').on('click', function(e) {
  $("div.msg").finish();
  $("div.msg").css({
    "top" : e.pageY - $("div.msg").outerHeight() - 2,
    "left" : e.pageX - $("div.msg").outerWidth() / 2
  });
  $("div.msg").show();
  $("div.msg").fadeOut(1000, 'easeInOutQuart');
});

body {
  margin: 75px;
}

div.msg {
  position: absolute;
  border: 1px solid black;
  background-color: white;
  text-align: center;
  vertical-align: middle;
  display: none;
  top: 0;
  left: 0;
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<button class='msg'>Click me</button>

It is recommended to append the message(div.msg) to body.

Answer 2

Plain and simple: use a alert box

$('button.msg').on('click', function(e) {
  alert('The data was saved successfuly ')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class='msg'>Click me</button>

Answer 3

According to your requirements, I think you want a toast sort of message box. You can do it like this:

$(function() {
  function myFunction() {
        var x = document.getElementById("snackbar")
        x.className = "show";
        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
  }

  $("#showToast").on('click', function(e) {
    myFunction();
  })

});

#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
}

#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Toast</h2>
<p>Toasts are often used as a tooltips/popups to show a message at the bottom of the screen.</p>
<p>Click on the button to show the snackbar. It will disappear after 3 seconds.</p>

<button id="showToast">Show Toast</button>

<div id="snackbar">Some text some message..</div>

Hope this helps!