I am playing around with toggle overlay to open up a little help window for users.
If I have a field where they are supposed to fill in something, I added a little question mark image next to the field, where they can click and a little window opens up describing what it’s all about.
It works fine, but now I want to add questionmarks to other fields in the same window, opening up a different message. But, where should I add the code to make this work, so the script knwos what window is connected to what question mark?
I just found some code where I used copy and paste. So, I have no idea what it’s doing and why.
Here are the stuff I have from the head and body parts. But, as it is now, only the first description opens up when I click the question marks.
I need something to separate them or id them or whatever… but how?
<style type="text/css">
div#overlay {
display: none;
z-index: 2;
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: relative;
z-index: 3;
margin: 150px auto 0px auto;
width: 400px;
height: 200px;
background: #666;
color: #000;
}
</style>
<div id="overlay"></div>
<div id="specialBox">
<p>FIELD ONE<br />
This field is for a description of field one.</p>
<button onmousedown="toggleOverlay()">Close Overlay</button>
</div>
<div id="overlay"></div>
<div id="specialBox">
<p>This is the second help window telling you what this is about.</p>
<button onmousedown="toggleOverlay()">Close Overlay</button>
</div>
<p>FIELD ONE<img onmousedown="toggleOverlay()" src="./img/questionmark.gif" alt="example"><br />
<p>FIELD TWO<img onmousedown="toggleOverlay()" src="./img/questionmark.gif" alt="example"><br />