- This topic has 1 reply, 2 voices, and was last updated 5 years ago by
neveryoung2212.
- AuthorPosts
- March 12, 2018 at 00:31 #16800
rguarnieriParticipantHello,
I am trying to execute a custom javascript/div code within a column of cells. It is for a small info button that when clicked, displays a “popup” with a description of the item listed in the row. Below is the CSS, HTML and SCRIPT that I am using. Unfortunately, the popup will only display “within” the cell in which the HTML is located. And, because that cell is small, it is not visible at all. Is it possible to overlay the DIV so that it appears highest on the z-index, and therefore in front of all the other cells when it is clicked?
`
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}.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 .popuptext::after {
content: “”;
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
</head>
<body style=”text-align:center”><div class=”popup” onclick=”myFunction()”>ⓘ
<span class=”popuptext” id=”myPopup”>This module will provide users with a high-level overview of patents, copyrights, trademarks, trade secrets, and confidentiality. It is generally intended as an introduction to more detailed programs for each.</span>
</div><script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById(“myPopup”);
popup.classList.toggle(“show”);
}
</script>May 16, 2018 at 14:54 #17586
neveryoung2212MemberHello, @rguarnieri !
Sorry for a late reply on forum. Fortunately, your problem has been already resolved. Don’t hesitate to contact us again – we’re always glad to hear from you.
Have a nice day! - AuthorPosts
- You must be logged in to reply to this topic.