關閉彈出div的幫助javascript

我可以幫助糾正下面的代碼嗎？你可以複製並粘貼並自己嘗試。 Onmouseover彈出div出現。如果我點擊（X）彈出的div應該關閉，但它沒有。只有雙擊（X）纔會關閉彈出窗格。 Onmouseover它應該總是顯示一個彈出div。關閉彈出div的幫助javascript

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

</head> 
<style type="text/css"> 
.container { 
display:block; 
width:500px; 
height:200px; 
border:1px solid green; 
} 
.advert { 
float:right; 
overflow:hidden; 
width:100px; 
height:30px; 
border:1px solid red; 
} 
.close { 
float:right; 
width:20px; 
height:28px; 
cursor:pointer; 
border:1px solid black; 
} 
</style> 
<body> 

<div class="container" onmouseover='getad(39);' onmouseout='hidead(39);changeback(39);'> 
<div class='advert' id="39" style="display:none;"><div class="close"><a href="javascript:closead(39)">X</a></div></div> 
<input type="text" value="1" id="ad39" /> 
</div> 


<div class="container" onmouseover='getad(40);' onmouseout='hidead(40);changeback(40);'> 
<div class='advert' id="40" style="display:none;"><div class="close"><a href="javascript:closead(40)">X</a></div></div> 
<input type="text" value="1" id="ad40" /> 
</div> 

<script type="text/javascript"> 

function getad(number) { 

    if(document.getElementById('ad'+number).value==1) { 
     if(document.getElementById(number).style.display == "none") { 
     document.getElementById(number).style.display = "block"; 

     } 
    } 

} 

function hidead(number) { 

    if(document.getElementById('ad'+number).value==1) { 
     if(document.getElementById(number).style.display == "block") { 
     document.getElementById(number).style.display = "none"; 

     } 
    } 
} 

function closead(number) { 

    document.getElementById('ad'+number).value = 0; 
    if(document.getElementById(number).style.display == "block") { 
     document.getElementById(number).style.display = "none"; 

     } 



    } 

    function changeback(number) { 

    if(document.getElementById('ad'+number).value==0) { 


    document.getElementById('ad'+number).value = 1; 

    } 
    } 
</script> 
</body> 
</html>

來源

2011-08-15 user892134

你的ID是錯的：

<div class='advert' id="39" style="display:none;"> 
<div class='advert' id="40" style="display:none;">

應該是：

<div class='advert' id="ad39" style="display:none;"> 
<div class='advert' id="ad40" style="display:none;">

來源

2011-08-15 17:09:56 Joe

我想你的代碼在Firefox和它的作品。

在IE8中，它不起作用。

這是最主要的原因，你不應該寫本地JavaScript ...

使用jQuery或其他JS框架。

首先，它會讓你的代碼跨瀏覽器兼容。其次，只有1行代碼會做你需要做的;-)

類似$（＃39）.hide（）或$（＃39）什麼.show（）

來源

2011-08-15 17:15:38 Cygnusx1

我測試了它在Firefox中，它不起作用。我希望容器的onmouseover顯示廣告。所以jquery不會有所作爲。 – user892134

問題ISN你的廣告沒有被刪除。這是爲了點擊觸發hidead（）函數的鏈接，還必須將鼠標光標懸停在觸發mouseover上的getad（）的div上。

那麼，如果您逐步完成這些操作，實際執行的是什麼。

點擊「X-link」標籤上的事件觸發器 closead（number）觸發並執行它的代碼。 Mouseout事件觸發並傳播給父母 hidead（數字）觸發並執行。鼠標懸停事件觸發並傳播給父母 getad（number）觸發並執行。

因此，您的事件正在卸載，然後立即重新加載。也許如果你能提供一些背景知識，我們可以幫助你做到這一點。我不確定在什麼情況下要在鼠標懸停上加載廣告，在鼠標懸停時將其隱藏，並向用戶提供關閉按鈕。這看起來像是很多加載/卸載/閃爍的內容，而不是簡單地讓靜態廣告通過AJAX或其他東西重新加載X秒。

來源

2011-08-15 17:20:46 Brian

我明白你的意思，是否有我可以讓我的方法工作？如果禁用onmouseover並重新啓用onmouseover onmouseout會怎麼樣？ – user892134

我實際上是從遠離本地JS編碼開始的。通過使用像jQuery（http://jquery.com）這樣的框架庫可以簡化整個嘗試（以及大多數JS代碼）。從那裏，您可以通過使用選擇器和鏈接功能輕鬆地綁定/解除綁定事件。 $（ '＃ad39'）VAL（0）。 $（ '＃39'）隱藏（）。這將根據需要更改您的價值並隱藏廣告容器。遠遠少於您需要使用的本地代碼。 jQuery將爲您處理跨瀏覽器兼容性。 – Brian

關閉彈出div的幫助javascript

回答

相關問題