javascript – Popup isn’t displaying correctly


I am trying to create a popup on the 1’s which are present in this table. I want different popup for different 1 value(data could be the same). But now what is happening that if I click on any 1 it just opens the first 1’s popup. It is happening because the id of each span is the same. But if I change the span id and try to create the another function then the pop up functionality doesn’t work.

Can someone please suggest me a way through which I can achieve this either using jquery or html,css. I have searched a lot on google but couldn’t able to find something relatable. Moreover, I am doing this thing in 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:

    <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>



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here