Я делаю программу, в которой каждый раз, когда пользователь заходит на страницу, на 2 секунды появляется сообщение «Hello».
Проблема в том, что каждый раз, когда сообщение отображается, оно появляется надстраница на белом фоне, и таким образом изменяет страницу, перетаскивая ее вниз.Я знаю, что проблема внутри 'div', но я не могу заставить его работать каким-либо другим способом, чтобы отображалось сообщение.
<div id="welcomeMessage"></div>
Я хотел бы, чтобы сообщение появилось настраница без изменения, поверх 'div2'.Это возможно?Я не могу решить это, кто-то может мне помочь?
Вот мой фрагмент кода:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script>
function customAlert(msg, duration) {
var styler = document.getElementById("welcomeMessage")
styler.setAttribute("style", "font-family: Arial, Helvetica, sans-serif;border: solid 3px #4d4d4d;color:white;width:200px;margin: auto;height:auto;top:50%;text-align: center;background: rgba(0, 0, 255,0.6); -webkit-border-radius: 19px; -moz-border-radius: 19px;border-radius: 19px;");
styler.innerHTML = "<h1>" + msg + "</h1>";
setTimeout(function() {
styler.parentNode.removeChild(styler);
}, duration);
document.body.appendChild(styler);
}
</script>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: white;
/*background colour*/
}
#div2 {
/* Style the header */
background-color: #f1f1f1;
/*#f1f1f1*/
/*light gray*/
padding: 20px;
text-align: center;
}
/*Navigation bar*/
ul {
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;
/*f1f1f1/*#333*/
}
li {
float: left;
}
li a {
display: block;
color: #333333;
/*333333*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: white;
/*#f9f9f9*/
/*Background colour when mouse on top*/
}
li a.active {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div id="welcomeMessage"></div>
<script>
customAlert("Hello!", 2000)
</script>
<div id="div2">
<h1>Project</h1>
</div>
<div class="tab" id="navbar">
<ul>
<li><a class="active">Tab 1</a></li>
<li><a target="_blank">Tab </a></li>
<li><a target="_blank">Tab 3</a></li>
</ul>
</div>
</body>
</html>