Question

我不熟悉HTML，CSS ...我正在创建自定义弹出窗口，它可以正常工作，但是我希望能够使用图标关闭弹出窗口。

您可以在下面找到我的代码。我的自定义弹出窗口仅在此弹出窗口的右上角添加了一个十字图标。

/* Popup container - can be anything you want */

.popup {
  position: relative;
  display: inline-block;
}


/* The actual popup */

.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  left: 50%;
  margin-left: -80px;
  margin-top: 10px;
}

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body style="text-align:center">

  <h2>Popup</h2>
  <a href="#" onclick="myFunction()">Click</a>
  <div class="popup">
    <span class="popuptext" id="myPopup">
       <input type="text" size="16"/>
      </span>
  </div>
  <script>
    // When the user clicks on div, open the popup
    function myFunction() {
      var popup = document.getElementById("myPopup");
      popup.classList.toggle("show");
    }
  </script>
</body>

</html>

Answer 1

首先，您需要添加关闭图标并在关闭toggle图标上调用相同的X函数：

// When the user clicks on div, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

/* Popup container - can be anything you want */

.popup {
  position: relative;
  display: inline-block;
}
.close{
   cursor:pointer;
text-align:right;
display:block;
padding:10px;
}

/* The actual popup */

.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  left: 50%;
  margin-left: -80px;
  margin-top: 10px;
}

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

<!DOCTYPE html>
<html>

<head>

</head>

<body style="text-align:center">

  <h2>Popup</h2>
  <a href="#" onclick="myFunction()">Click</a>
  <div class="popup">

    <div class="popuptext" id="myPopup">
      <span class="close" onclick="myFunction()">X</span>
      <input type="text" size="16" />
    </div>
  </div>

</body>

</html>

Answer 2

您只需要添加带有关闭按钮的div或span或锚标记a，然后执行相同的功能即可，即myFunction() ，单击该按钮时。它是通过以下代码完成的，虽然CSS尚不完善，但效果很好：

/* Popup container - can be anything you want */

.popup {
  position: relative;
  display: inline-block;
}


/* The actual popup */

.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  left: 50%;
  margin-left: -80px;
  margin-top: 10px;
}

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

.close-button {
  position: absolute;
  right: 0;
  top: -10px;
  background: #555;
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body style="text-align:center">

  <h2>Popup</h2>
  <a href="#" onclick="myFunction()">Click</a>
  <div class="popup">
    <span class="popuptext" id="myPopup">
       <div class="close-button" onclick="myFunction();">x</div>
       <input type="text" size="16"/>
      </span>
  </div>
  <script>
    // When the user clicks on div, open the popup
    function myFunction() {
      var popup = document.getElementById("myPopup");
      popup.classList.toggle("show");
    }
  </script>
</body>

</html>

在弹出窗口中使用图标添加关闭按钮

2 个答案: