CODEWITHSUNDEEP
htmlcssalert
ana
ana

Reputation: 417

Custom-Alert on top of the page

I'm doing a program where every time a user enters the page, a message of 'Hello' appears for 2 seconds.

The problem is that each time the message is displayed, it appears above the page on a white background, and in this way alters the page by dragging it down. I know that the problem is inside the 'div', but I can’t get it to work in any other way so that the message is displayed.

<div id="welcomeMessage"></div>

I would like the message to appear on the page without altering it, on top of 'div2'. Is this possible? I can not solve it, can someone help me?

Here is my code snippet:

<!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>

Upvotes: 0

Views: 65

Answers (1)

jitu thakur
jitu thakur

Reputation: 740

Use below CSS to fix alert on top of the page:

#welcomeMessage{position:fixed; padding:20px; text-align:center; left:0; top:0; width:100%;}

Upvotes: 2

Related Questions