Question

i have a css popup div that when it loads through the onClick it also brings up a blanket of transparency kind of like how Facebook does when you look at photos

How do i get that popup div to close when i click on the blanket?

Heres the code

‘

<center><div id="blanket" style="display:none;">
</div>

<table width="1000" border="0">    
  <tr>

 <td>  
<div id="mainAdminCP">

<div class="editRecipe" >
<a href="#" onclick="popup('popUpAdminEditRecipe');return false;"><h2>Edit Recipe</h2></a> 
</div>
<div id="popUpAdminEditRecipe" style="display:none;" align="center"> 
<br />
<br />
<form id="editRecipe">
<fieldset id="inputs">
    <input id="username" type="text" placeholder="Please insert the name of the recipe" autofocus required>   
    <br />
    <br />
    <input id="add" type="text" placeholder="Recipe Name" required>
    <input id="add" type="text" placeholder="Recipe Ingredients" required>
    <input id="add" type="text" placeholder="Recipe Instructions" required>
    <input id="add" type="text" placeholder="Recipe Image" required>
</fieldset>
<fieldset id="actions">
    <input type="submit" id="submit" value="Save Changes">
    <input type="submit" id="submit" onClick="popup('popUpAdminEditRecipe')" value="Close">
</fieldset>
</form>
</div>   

<div class="editCoins"> 
<a href="#" onclick="popup('popUpAdminEditCoins');return false;"><h2>Edit Coins</h2></a> 
</div>
<div id="popUpAdminEditCoins" style="display:none;" align="center"> 
<br />
<br />
<form id="login">
<fieldset id="inputs">
    <input id="username" type="text" placeholder="Please insert the Username of the User" autofocus required>   
    <input id="add" type="text" placeholder="Add Coins" required>
    <input id="add" type="text" placeholder="Subtract Coins" required>
</fieldset>
<fieldset id="actions">
    <input type="submit" id="submit" value="Submit">
    <input type="submit" id="submit" onClick="popup('popUpAdminEditCoins')" value="Close">
</fieldset>

‘

And heres the link to the page itself to get a clear example of what im looking for.

http://teknologenie.com/fruitforest/admincp.php

Ive tried placing the
<a href="#" onClick="popup('popUpAdminEditUser')" > </a>
Within the blanket div, and nothing. Just kind of screws everything up.

Edit:
Also if you visit the link, and click the text, the whole div doesnt get directly in the middle of the screen and i need it to be. Any solutions?

Answer 1

Instead of putting an link inside the blanket div, pup an onclick function on the blanket div itself:

<div id="blanket" onclick="closePopup()" style="height: 681px; display: block;"></div>

The function closePopup should then set display none to the popup and the blanket:

function closePopup() { 
    document.getElementById('blanket').style.display = 'none';               
    document.getElementById('popUpAdminEditCoins').style.display = 'none';
}