Question

我正在做一个程序，每次用户进入页面时，都会出现“ Hello”消息2秒钟。

问题在于，每次显示该消息时，该消息都会在白色背景上显示在页面上方，并以此方式通过向下拖动来更改页面。我知道问题出在'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>

Answer 1

使用下面的CSS来修复页面顶部的警报：

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

页面顶部的自定义提醒

1 个答案: