當我點擊按鈕時，jQuery模式將不會顯示

我試圖創建一個模式窗口，當你點擊導航欄中的登錄按鈕時彈出。我已經做到了，所以模式和它的頁面疊加在css中都設置爲'display: none'。我已經嘗試了所有可以讓它在點擊上顯示的方法，但我無法實現它的功能。我試過fadeIn()。我試過.css()來改變它。我甚至嘗試只用'display：none'來製作一個特殊的課程，並使用.removeClass()。沒有用！當我點擊按鈕時，jQuery模式將不會顯示

這是一個學校作業，所以我不能使用jQuery UI。我並沒有要求爲我做這件事。我只是想朝着正確的方向輕推。有人能幫我嗎？這是我現在的代碼。

$(document).ready(function() { 
    $('#login').click(function(event) { 
     event.preventDefault(); 
     $('.overlay').removeClass('.displaynone'); 
     $('.modal').removeClass('.displaynone'); 
    }); 
});

這是一個JS小提琴與整個情況在那裏。登錄按鈕應該在其上面顯示覆蓋層和模態。我想讓它漸漸消失，最好是模態有第二次延遲。

小提琴：https://jsfiddle.net/duagdn8m/1/

來源

2016-02-11 Matt Lee

https://jsfiddle.net/duagdn8m/5/ 只要刪除。放在你想刪除的類名上。

$('.overlay').removeClass('displaynone'); 
$('.modal').removeClass('displaynone');

來源

2016-02-11 20:41:57 Jeremy

你加入的類名.了。這不是必需的。你不需要.符號在這裏：

$('.overlay').removeClass('displaynone'); 
$('.modal').removeClass('displaynone');

小提琴：https://jsfiddle.net/cnye843k/

我建議給人一種absolute作爲position荷蘭國際集團的登錄界面，使它成爲一個模式。或者如果你還沒有包含CSS，那很好。

來源

2016-02-11 20:32:24

實際上，我發佈這個之後我才明白這一點。我無法相信。我昨晚在這一切工作，並無法使其工作。然後我張貼這個並且沒有問題地解決它。不過謝謝，我很欣賞這種努力。 –

@MattLee順便說一下，看看更新......'：）' –

您需要刪除removeClass('.displaynone');的.和overlay和modal是類，而不是ids。所以你需要更新你的css到.overlay和.modal。

也，其更輕鬆地設置overlay和modal到display:none;然後fadeIn兩個像這樣： - 。

$(document).ready(function() { 
    $('#login').click(function(event) { 
     event.preventDefault(); 
     $('.overlay, .modal').fadeIn(1000) 
    }); 
});

這將使你在1秒淡出

Fiddle

來源

2016-02-11 20:43:55 BenG

當我點擊按鈕時，jQuery模式將不會顯示

回答

相關問題