Question

按下按钮时如何制作弹出框如何在我添加的链接

中使此代码适用于图像上的按钮

https://www.w3schools.com/code/tryit.asp?filename=FD018J3LMVQB

Answer 1

“弹出框”是什么意思？浏览器或文档中的元素发出警报？

对于提醒：您需要像这样使用JavaScript：

<button onclick="alert('Message goes here');"></button>

对于文档中的box元素：您也应该使用JavaScript，如下所示：

function popBox(id) {
  if (document.getElementById("pop" + id)) return;
  var myBox = document.createElement("div");
  // Style your div element as you wish, with JS, in <style></style>, in an external stylesheet
  myBox.id = "pop" + id;
  myBox.innerHTML = "Hey.";
  document.getElementById("imgwrap").appendChild(myBox);
}

整个文件：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <style>
    .imagewrap {
      display: inline-block;
      position: relative;
      z-index: 1;
    }
    
    #button1 {
      position: absolute;
      bottom: 0;
      left: 25%;
    }
    
    #button2 {
      position: absolute;
      bottom: 0;
      right: 0;
    }
    
    #button3 {
      position: absolute;
      right: 50%;
      top: 50%;
    }
    
    #pop1, #pop2, #pop3 {
      position: absolute;
      z-index: 3;
      width: 50px;
      height: 50px;
    }
    
    #pop1 {
      right: 10%;
      top: 10%;
      background-color: #FFF;
    }
    
    #pop2 {
      right: 20%;
      top: 20%;
      background-color: #888;
    }
    
    #pop3 {
      right: 30%;
      left: 30%;
      background-color: #000;
    }
  </style>
</head>

<body>
    <div class="imagewrap" id="imgwrap">
      <img src="https://www.google.com/logos/2012/opening_ceremony-2012-hp.jpg" />
      <div id="pop">
        <button id="button1" onclick="popBox(1);">אודות</button>
        <button id="button2" onclick="popBox(2);">ערוץ היוטיוב</button>
        <button id="button3" onclick="popBox(3);">פייסבוק</button>
      </div>
    </div>
    <script>
      function popBox(id) {
        if (document.getElementById("pop" + id)) return;
        var myBox = document.createElement("div");
        // Style your div element as you wish, with JS, in <style></style>, in an external stylesheet
        myBox.id = "pop" + id;
        myBox.innerHTML = "Hey.";
        document.getElementById("imgwrap").appendChild(myBox);
      }
    </script>
  </body>
</html>

我推荐使用button元素而不是input，因为它不是表单，而是按钮。

编辑：

我刚刚看到你的评论说你想使用 only CSS 。您至少需要最少的JavaScript。我们的想法是创建您的div元素，根据需要设置样式，然后添加display: none;。然后，您必须使用JavaScript将其更改为display: block;：

<button id="button1" onclick="document.getElementById('pop1').style.display = 'block';">etc</button>

如何使用css将弹出框添加到按钮

1 个答案: