CODEWITHSUNDEEP
jquerycss
code-8
code-8

Reputation: 58810

Display Message on top right via jQuery + CSS

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 ?

Upvotes: 2

Views: 304

Answers (2)

Rashed Rahat
Rashed Rahat

Reputation: 2495

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());
});

Upvotes: 1

Krokodil
Krokodil

Reputation: 1480

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()});
});

Upvotes: 1

Related Questions