0

私は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全体が画面の中央に直接表示されないため、表示する必要があります。解決策はありますか？

4

2 に答える 2

2

ブランケットdiv内にリンクを配置する代わりに、ブランケットdiv自体にonclick関数を設定します。

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

次に、関数closePopupは、ポップアップとブランケットにdisplaynoneを設定する必要があります。

function closePopup() { 
    document.getElementById('blanket').style.display = 'none';               
    document.getElementById('popUpAdminEditCoins').style.display = 'none';
}
于 2012-05-14T01:07:48.380 に答える
1

ここに例を書きました：http：//jsfiddle.net/KXK6E/2/

HTML内ではなく、javascript内でイベントをバインドする方がはるかに優れています。

document.getElementById("blanket").onclick = function(e){
    document.getElementById("popup").style.display = "none";
    e.target.style.display = "none";
};

document.getElementById("trigger").onclick = function(){ 
    document.getElementById("blanket").style.display = "block";
    document.getElementById("popup").style.display = "block";
}

</ p>

于 2012-05-14T01:22:45.570 に答える