Looking for a workaround due to restrictions on using alert or any Js dialog box, I need to create some sort of magic trick:
1. Create a div with a link named "info". 2. Develop an invisible div that will serve as my "PopUp" containing random information. 3. When the info link is clicked, the invisible div should appear.
Although this may seem simple and fairly straightforward, I'm struggling to grasp the logic behind making it work. Just to save myself from embarrassment, I recently started programming... about a month ago and have only dabbled in HTML and CSS so far. JavaScript is still new territory for me.
This is the code I currently have:
<div class="scroll-area" id="lista">
<div class="box">
<p>Item #1</p>
<p class="info"><a href="#" id="lnkInfo">Info</p>
</a>
<p class="info"><a href="#">Take</p>
</a>
</div>
<div class="box">
<p>Item #2</p>
<p class="info"><a href="#">Info</p>
</a>
<p class="info"><a href="#">Take</p>
</a>
</div>
</div>
Now let's unveil the mysterious "PopUp"...
<div class="popUp">
<ul>
<li>BLA BLA</li>
<li>BLA BLA/li>
<li>BLA BLA</li>
<li>BLA!</li>
</ul>
</div>
In case you need the CSS too:
.popUp {
position: absolute;
width: 300px;
height: 300px;
margin: 0 auto;
background-color: #ecf0f1;
top: 100px;
left: 100px;
display: none;
}
.show {
display: block;
}
And here's a snippet of what could be the starting point for the JS:
var elementPopUp = document.getElementById('lnkInfo');
elementoPopUp.addEventListener('click', validate);
function validate() {
document.getElementById('popUp').className += ' show';
}