jQuery modal не будет отображаться, когда я нажимаю кнопку

Question

Я пытаюсь создать модальное окно, которое появляется, когда вы нажимаете кнопку входа в навигационную панель. Я сделал так, чтобы и модальный, и его наложение страниц были установлены с 'display: none' в css. Я пробовал каждый способ, чтобы показать его на клик, и я просто не могу заставить его работать. Я пробовал fadeIn(). Я попробовал .css(), чтобы изменить его. Я даже пробовал сделать специальный класс только с «display: none» и используя .removeClass(). Ничего не работает!

Это школьное задание, поэтому я не могу использовать пользовательский интерфейс jQuery. Я не прошу, чтобы это было сделано для меня. Я просто хочу подтолкнуть в правильном направлении. Кто-нибудь может мне помочь? Это код, который у меня есть прямо сейчас.

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

Здесь находится сценарий JS со всей ситуацией. Кнопка «Вход» должна вызывать наложение и модальную надпись поверх нее. Я бы хотел, чтобы он затухал, желательно, когда модальная имела вторую задержку.

Fiddle: https://jsfiddle.net/duagdn8m/1/

Answer 1

https://jsfiddle.net/duagdn8m/5/ Просто снимите. на имя класса, которое вы хотите удалить.

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

Answer 2

Вы добавляете . в именах классов тоже. Это не нужно. Вам не нужно . обозначения здесь:

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

скрипку: https://jsfiddle.net/cnye843k/

Я предложил бы давая absolute в position ИНГ для экрана входа в систему, чтобы сделать его покадрово. Или, если вы не включили CSS, тогда отлично.

Answer 3

вам нужно удалить . в 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