Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Popup Inventory problems
Hi,
I'm trying to implement some kind of popup inventory. I have tried to put the code into the Sugarcane sidebar so I don't always need to write it into every passage. The problem is, when the window appears, it is always behind the passage div. Chanding the z-index doesn't seem to have much effect.
Any ideas how I could do this better? Or anyone have any nice alternative examples?
BTW I am very new to coding. I know basic CSS and HTML, as for Javascript I can do the basic objects and things but I don't really have any working knowledge of it.
CSS code -
I'm trying to implement some kind of popup inventory. I have tried to put the code into the Sugarcane sidebar so I don't always need to write it into every passage. The problem is, when the window appears, it is always behind the passage div. Chanding the z-index doesn't seem to have much effect.
Any ideas how I could do this better? Or anyone have any nice alternative examples?
BTW I am very new to coding. I know basic CSS and HTML, as for Javascript I can do the basic objects and things but I don't really have any working knowledge of it.
CSS code -
.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:2001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: fixed;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:2002;
overflow: auto;
}<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Inventory</a>
<div id="light" class="white_content">This is the Inventory <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
Comments
It was all to do with the POSITION element. z-index gets complicated depending if the divs are absolute/fixed/relative.
It seems I do have to replicate the code into every passage to have at the top. In the StoryMenu it just doesn't work, and I don't have the coding skills to work out a way around.....