Display Message on top right via jQuery + CSS

user_4480164 0
Viewed 97

enter image description here

I don't want to include extra library for a small alert message. I want to dynamically append one to the DOM when need one and will fadeOut in 3s, and will remove from the DOM after.

I've tried codes below, but I have no luck and see nothing display.

$('body').append('<div id="msg" style="position: fixed; top: 0; left: 0; background:green; color:red;  z-index: 999; "> copied ! </div>');
$("#msg").fadeIn('slow', function () {
    $("#msg").delay(3000).fadeOut('slow');
});
$("#msg").remove();

Am I missing anything ?

css jquery
2 Answers

Your msg is being removed without a delay. As for the z-index, the maximum range is ±2147483647. Hope this helps:

$('body').append('<div id="msg" style="position: fixed; padding: 50px; top: 20px; left: 20px; background:green; color:red;  z-index: 9999; "> copied ! </div>');
$("#msg").fadeIn('slow', function () {
    $("#msg").delay(3000).fadeOut('slow', () => {$("#msg").remove()});
});
user_146773020

fadeIn takes a callback function. As a result, it'll work asynchronously. In the mean time, later portion of code $("#msg").remove() will be executed. So, to achieve your goal code like below.

Try:

$('body').append('<div id="msg" style="position: fixed; top: 0; left: 0; background:green; color:red;  z-index: 999; "> copied ! </div>');

$("#msg").fadeIn('slow', function () {
    $("#msg").delay(3000).fadeOut('slow', () => $("#msg").remove());
});
user_104278070
Related