弹出窗口未正确显示

Posted 2023-05-08

【中文标题】弹出窗口未正确显示

【英文标题】：Popup isn't displaying correctly

【发布时间】：2022-01-03 15:12:56

【问题描述】：

我正在尝试在此表中存在的 1 上创建一个弹出窗口。我想要不同的 1 值的不同弹出窗口（数据可能相同）。但是现在发生了什么，如果我点击任何 1 它只会打开第一个 1 的弹出窗口。这是因为每个跨度的id 是相同的。但是，如果我更改 span id 并尝试创建另一个函数，那么弹出功能将不起作用。

有人可以给我建议一种方法，我可以使用 jquery 或 html、css 来实现这一点。我在谷歌上搜索了很多，但找不到相关的东西。此外，我在 ASP.net 中做这件事

        <style>
        .popup 
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;


/* 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;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;


/* Popup arrow */
.popup .popuptext::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 */
.popup .show 
  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>

表：

    <table border="1">
        <tr style= "background-color: #eee;">
                <th scope="col" style="width: 90px">Date</th>
                <th scope="col">09:00</th>
                <th scope="col">09:30</th>
                <th scope="col">10:00</th>
                <th scope="col">10:30</th>
                <th scope="col">11:00</th>
                <th scope="col">11:30</th>
                <th scope="col">12:00</th>
                <th scope="col">12:30</th>
                <th scope="col">13:00</th>
                <th scope="col">13:30</th>
                <th scope="col">14:00</th>
                <th scope="col">14:30</th>
                <th scope="col">15:00</th>
                <th scope="col">15:30</th>
                <th scope="col">16:00</th>
                <th scope="col">16:30</th>
                <th scope="col">17:00</th>
                <th scope="col">17:30</th>
                <th scope="col">18:00</th>
            </tr>
        <tr>  
                    <td>26-11-2021</td>
                    <td>0</td>  
                    <td>0</td>  
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>
                        <div class="popup" onclick="myFunction()">1
                        <span class="popuptext" id="myPopup">
                        Customer name : Neeraj
                        Customer Number : 1234567890
                        Contact Date & Time : 11/25/2021 14:04
                        Agent Name
                        </span>
                        </div>
                    </td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                </tr>
        <tr>  
                    <td>26-11-2021</td>
                    <td>0</td>  
                    <td>0</td>  
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>
                        <div class="popup" onclick="myFunction()">1
                        <span class="popuptext" id="myPopup">
                        Customer name : Neeraj
                        Customer Number : 1234567890
                        Contact Date & Time : 11/25/2021 14:04
                        Agent Name
                        </span>
                        </div>
                    </td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                </tr>
        <tr>  
                    <td>26-11-2021</td>
                    <td>0</td>  
                    <td>0</td>  
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>
                        <div class="popup" onclick="myFunction()">1
                        <span class="popuptext" id="myPopup">
                        Customer name : Neeraj
                        Customer Number : 1234567890
                        Contact Date & Time : 11/25/2021 14:04
                        Agent Name
                        </span>
                        </div>
                    </td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                </tr>
    </table>

    <script>
function myFunction() 
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");

    </script>

【问题讨论】：

每个span的id都是一样的。id必须是唯一的，你必须使用class来做到这一点。

【参考方案1】：

您只需要一个方法来从所有弹出文本元素中删除显示类，然后再打开新的。您还可以通过使用一个函数并将要触发的弹出窗口的参数传递给它来消除对每个弹出元素使用单个函数的需要。

请在 *** 中查看此答案：

How to make only 1 popup open at a time?

这里是你的答案

【讨论】：

它有效。谢谢！

不客气

【参考方案2】：

Try this,

$(window).ready(function () 
        $(document).on('click','.popup',function () 
            var popup = $(this).closest('.popuptext');
            popup.show();
        );
    );

ID 不是必需的。尝试通过类访问它。

【讨论】：

它给出了一个错误 stack.html:187 Uncaught TypeError: Cannot read properties of null (reading 'classList')

你试过 popup.show();而不是 popup.classList.toggle("show");

移除 div 标签上的 onclick 功能

@divakarraja 它仍然抛出这个异常：未捕获的类型错误：无法读取 null 的属性（读取“显示”）

对我来说太糟糕了......我已经编辑了答案。我们必须使用 $(this)