Question

我有以下html，并希望在onclick函数弹出窗口周围包装一个表格单元（1x1，长度和宽度可轻松编辑）。这包括HTML，CSS和JavaScript。最终可能会在一行中包含多列，并带有多个弹出窗口，因此，请尽可能使它适应性强。

Error: Syntax error, unrecognized expression: div[xml:id="pe007"] > surname

// When the user clicks on div, open the popup
function myFunction901() {
  var popup901 = document.getElementById("myPopup901");
  popup901.classList.toggle("show901");
}

/* Popup container - can be anything you want */

.popup901 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  color: #feb330;
  "

}


/* The actual popup */

.popup901 .popuptext901 {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -31px;
}


/* Popup arrow */

.popup901 .popuptext901::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}


/* Toggle this class - hide and show the popup */

.popup901 .show901 {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}


/* Add animation (fade in the popup) */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Answer 1

我不知道这是否是最好的方法，但是我能够在函数中声明“ n ”

function myFunction901(n) {

然后为您输入数字的每个弹出窗口中的每个onclick函数

示例：

onclick="myFunction901(1)"

最后在您的函数中，我写了元素ID get as：

var popup901 = document.getElementById("myPopup90"+n);

因此它将读取该数字并获取匹配的ID。

然后您可以使用css设置弹出区域的样式，以根据需要制作em（类似其他正方形）。

检查以下代码：

<html>
<head>
<style>
/* Popup container - can be anything you want */
.popup901 {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none; 
    color:#feb330;"
}

/* The actual popup */
.popup901 .popuptext901 {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -31px;
}

/* Popup arrow */
.popup901 .popuptext901::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup901 .show901 {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
</style>
</head>
<body>
<h1>&nbsp;</h1>
<h2>&nbsp;</h2>
<h3>&nbsp;</h3>
<h4>&nbsp;</h4>
<h5>&nbsp;</h5>
<h6>&nbsp;</h6>

<table>
<tbody>
  <tr>
    <td>
      <div class="popup901" onclick="myFunction901(1)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Teams
      <span class="popuptext901" id="myPopup901">2016, 2018: 22</span>
      </div>
    </td>
        <td>
      <div class="popup901" onclick="myFunction901(2)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Teams
      <span class="popuptext901" id="myPopup902">2016, 2018: 22</span>
      </div>
    </td>
        <td>
      <div class="popup901" onclick="myFunction901(3)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Teams
      <span class="popuptext901" id="myPopup903">2016, 2018: 22</span>
      </div>
    </td>
        <td>
      <div class="popup901" onclick="myFunction901(4)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Teams
      <span class="popuptext901" id="myPopup904">2016, 2018: 22</span>
      </div>
    </td>
  </tr>
</tbody>
</table>

<script>
// When the user clicks on div, open the popup
function myFunction901(n) {
		var popup901 = document.getElementById("myPopup90"+n);
    popup901.classList.toggle("show901");
}
</script>

</body>
</html>

这是你的意思吗？

如何在表格单元格中插入弹出窗口？

1 个答案: