我有一个 css 弹出 div,当它通过 onClick 加载时,它也会带来一层透明感,就像 Facebook 在您查看照片时所做的那样
当我点击毯子时,如何让弹出的 div 关闭?
代码如下
'
<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>
'
这里是页面本身的链接,以清楚地说明我在寻找什么。
http://teknologenie.com/fruitforest/admincp.php
我试过放置
<a href="#" onClick="popup('popUpAdminEditUser')" > </a>
在毯子 div 中,什么也没有。只是把一切都搞砸了。
编辑: 此外,如果您访问链接并单击文本,整个 div 不会直接位于屏幕中间,我需要它。有什么解决办法吗?
最佳答案
与其在 blanket div 中放置一个链接,不如在 blanket div 本身上添加一个 onclick 函数:
<div id="blanket" onclick="closePopup()" style="height: 681px; display: block;"></div>
然后函数 closePopup 应该将 display none 设置为 popup 和 blanket:
function closePopup() {
document.getElementById('blanket').style.display = 'none';
document.getElementById('popUpAdminEditCoins').style.display = 'none';
}
关于javascript - 单击毯子时使 CSS 弹出窗口消失(示例 : Facebook Photo's),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10576452/