I've been experimenting with the popup feature as a sort of temporary replacement for a compendium, to include some useful information by clicking on parts of the sheet. Similar to the D&D beyond character sheet, which pops up a little explainer bar for almost any element on the sheet. I'm using the guide here: <a href="https://wiki.roll20.net/Character_Sheet_Enhancement#Popup" rel="nofollow">https://wiki.roll20.net/Character_Sheet_Enhancement#Popup</a> It's mostly working seamlessly, however I hit an unexpected hickup. It seems that repeating input fields, some div elements, and some of the images are included as part of the popup overlay. I'm not really even sure where to begin troubleshooting this, as I don't fully understand how the overlay element works. But if it helps, here's one example of a popup in the html, as well as the relevent CSS. <div class="passiveperceptiontable">
<div class="passiveperceptiontabletoprow">
<div class="passiveperceptionsimage">
<div class="box">
<a class="button" href="#popup2"><img class="REFImg" src="<a href="https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/WT%20Icon.png?raw=true" rel="nofollow">https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/WT%20Icon.png?raw=true</a>" width="23" height="23"></img></a>
</div>
<div id="popup2" class="overlay">
<div class="popup">
<h2>Passive Perception Table</h2>
<a class="close" href="#">×</a>
<div class="content">
<p>
Passive score totals are used passively, in that you as a player don't roll anything. They are compared against a DC of something in the environment, like a trap or hidden object, to determine if you notice something. Sometimes an opposed roll is made instead, which must beat your passive score to succeed.
<br><br>
Passive scores start with a<strong>base value of 7</strong> (equal to an average die roll), and then add your Wit + your skill modifier.
<br><br>
<strong>Passive Perception</strong> is your general <i>Perception</i> skill. <strong>Enemy Detection</strong> is used against <i>Stealth</i> rolls. <strong>Passive Insight</strong> is used to determine if someone is lying or hiding something.
</p>
</div> <!-- close content -->
</div> <!-- close popup -->
</div> <!-- close popup1 id overlay -->
</div>
<span class="passiveperceptiontotal">Total</span> <!-- rest of table continuied... --> And the CSS .box {
/*
width: 90%;
margin: 0;
background: none;
padding: 35px;
border: 2px solid gray;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
*/
}
.button {
/*
font-size: 1em;
padding: 10px;
color: black;
background-color: orange;
border: 1px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
*/
cursor: help;
}
.button:hover {
/*
background: gray;
*/
color: green;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 0px auto;
/* padding: 13px; */
background: #292328;
color: #deddd7;
border-radius: 5px;
border: 1px solid gray;
width: 30%;
position: relative;
left: 0px;
top: 56px;
font-family: georgia, palatino, times new roman;
/*
transition: all 5s ease-in-out;
*/
}
.popup h2 {
margin-top: 0px;
margin-bottom: 8pt;
padding-top: 6px;
padding-bottom: 2px;
color: white;
height: 22px;
font-family: Girassol, Garamond, Tahoma, Arial, sans-serif;
text-align: center;
vertical-align: bottom;
background: black;
font-size: 12pt;
}
.popup .close {
position: absolute;
top: 0px;
right: 20px;
/*
transition: all 200ms;
*/
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #cc8c47;
opacity: .9;
}
div.popup .close:hover {
color: #ffffff;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
@media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
div.popup .content {
text-indent: 16px;
text-align: left;
margin-left: 12px;
margin-right: 12px;
margin-bottom: 12px;
font-size: .93rem;
font-family: Garamond, Georgia, Palatino;
} It does appear that removing position: relative here fixes this. But is this part of the code important? Any risks of disabling this? What CSS specificity would I even need to use to override this? It seems I sorta solved one aspect of it, or found a temporary fix. But I'm a little perplexed about what's going on and why, and would appreciate anyone who understands what's going on here or some tips on how to go about this without changing things and having unintended consequences due to lack of awareness. And as far as I'm aware, you can't remove a CSS element, you'd have to replace it with something else? Thanks!
