淡入/淡出不工作彈出

我創建了一個彈出窗口，我試圖讓它淡入淡出緩慢。我嘗試在其他人嘗試應用淡入淡出之後對代碼建模，但由於某種原因，我沒有產生影響。淡入/淡出不工作彈出

當我第一次添加的代碼斷的模擬彈出我看到，它在這樣的onclick代碼淡入淡出選項...

onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">

和我看到的代碼，它的工作很大。現在我添加了ID，但沒有任何反應。

我創建了一個小提琴顯示什麼，我試圖做...

https://jsfiddle.net/51ysjz6y/

有誰看到什麼我做錯了嗎？

來源

2015-07-03 Becky

只需添加一個class到<a>並刪除所有不必要的點擊javascript功能您可以按如下所示將其稱爲overlay：

$('.signin').on('click',function(){ 
    $("#light,.black_overlay").fadeIn("slow"); 
}); 

$('.close').on('click',function(){ 
    $("#light,.black_overlay").fadeOut("slow"); 
})

DEMO

UPDATE

<div class="signinbutton"> 
    <a class="signin" href="javascript:void(0)">Sign In</a> 
</div> 
<div id="light" class="signInpopup"> 
    <a class="close" href="javascript:void(0)">Close</a> 
    <!--Forms and other elements--> 
</div>

這是您的html結構現在

來源

2015-07-03 08:06:56

當我做你所做的事情時，我的鏈接甚至不打開彈出窗口。 – Becky

你檢查過演示嗎？正如我剛纔提到的那樣，在'signin'錨上添加一個類！ –

是的，我做了，我不知道爲什麼沒有發生。我的網站是sundayfundayleague.com它有助於看到它嗎？它只是在索引頁面上。 – Becky

我更新您的撥弄下

改變了一些代碼，jQuery和從DIV的onclick刪除

Updated fiddle

$(document).ready(function(){ 
     $(".signinbutton a").click(function() { 
      $('#light').fadeIn('slow'); 
     }); 

     function fade(id) { 
      $("#" + id).fadeOut('slow'); 
     } 
    });

來源

2015-07-03 08:02:12 Hemal

寫在你的代碼撥弄：

有你想要的一切。

只需更換

<a class="close" href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>

隨着

<a class="close" href="javascript:fade('light'); fade('fade');" >Close</a>

和

<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Sign In</a>

與

<a href="javascript:light('light'); light('fade');">Sign In</a>

來源

2015-07-03 08:18:42

淡入/淡出不工作彈出

回答

相關問題