Here is a notification code that I want to display in the center of the screen. Interestingly, on the first click, it doesn't appear in the middle, but on the second click, it works as expected. It seems like there might be an issue with height and width.
(help without defining css)
var showNotice = function(txt,mode){
var mode = mode || 0;
var width = $(window).width();
var height = $(window).height();
$("body").append("<span id='notice'>" + txt + "</span>");
var noticeW = $("body #notice").outerWidth();
var noticeH = $("body #notice").outerHeight();
$("body #notice").css({
"position": "absolute",
"z-index": "1000",
"background": "black",
"color": "white",
"padding": "20px",
"cursor": "pointer",
"border-radius": "8px",
"box-shadow": "0 0 15px rgba(0,0,0,0.6)",
"top": (height / 2) - (noticeH / 2) + "px",
"left": (width / 2) - (noticeW / 2) + "px",
"display": "none"
}).fadeIn();
$(document).on("click", "body #notice", function(){
$("body #notice").fadeOut(1000, function(){
$(this).remove();
});
});
if(mode === 0){
setTimeout(function(){
$("body #notice").fadeOut(1000, function(){
$(this).remove();
});
},5000);
}
} // ----- showNotice() -----
Html
<button onclick="showNotice('some text',1)">
Click
</button>