Обычно, если вы хотите добавить какую-то вещь, вам нужно полностью понимать её логику работы, чтобы это описать в коде. То есть, если вы можете описать весь функционал с помощью
алгоритма, есть смысл самостоятельно это писать. В противном случае, лучше воспользоваться готовым решением, вроде
Dropdowns или
Modals из Bootstrap, потому что это поможет сэкономить время и обеспечит определённую надёжность работы за счёт использования дополнительных ресурсов (нужно подгружать CSS- и JS-файлы бутстрапа).
Самостоятельное понимание обычно приходит с опытом. То есть, например, если я хочу написать модал, я сначала должен понять, что такое этот мой модал и как он себя должен вести в различных ситуациях. По сути, это какой-то элемент, который выводится на переднем плане и блокирует всё остальное. То есть, мне нужно создать один полноэкранный элемент (1), который будет блокировать всё остальное, а потом поместить в него другой элемент (2), который будет отображать нужный мне контент. При клике по элементу 1 мне нужно скрывать оба элемента, освобождая всё, что находится на заднем плане. При этом, если я кликаю внутри элемента 2, ничего не должно происходить. Дальше, мне нужно показывать элементы 1 и 2 после определённого события, например, если я кликаю по кнопке (3).
Вот простейший код который работает как АК-47 (так же
доступно на JsFiddle для тестирования):
HTML
<span id="element-3">Open modal</span>
<div id="element-1">
<div id="element-2">
Modal content
</div>
</div>
CSS:
body {
width: 100vw;
height: 100vh;
background-color: green;
margin: 0;
padding: 0;
}
#element-3 {
border: 1px solid black;
background-color: white;
}
#element-1 {
display: none;
position: fixed;
background-color: blue;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
#element-1.show {
display: block;
}
#element-2 {
background-color: red;
width: 50vw;
height: 50vh;
margin: 0 auto;
}
JS
var element1 = document.getElementById('element-1');
var element2 = document.getElementById('element-2');
var element3 = document.getElementById('element-3');
element3.onclick = function() {
element1.classList.add('show');
};
element1.onclick = function(event) {
if (event.target !== event.currentTarget) {
return;
}
element1.classList.remove('show');
};
После того, как вы сделали стабильно работающий функционал, можно начать его развивать. Например, нужно сделать, чтобы элемент 1 был прозрачным. Или нужно сделать, чтобы он и элемент2 появлялись/исчезали, используя анимацию, а не мгновенно. Или нужно избавиться от этих красно-сине-зелёных цветов и отображать у элемента 2 закруглённые уголки и центрировать его по вертикали. Это уже задачи другого уровня, которые решаются другими методами, которые тоже можно разбить на подзадачи и решать их так, чтобы они не ломали задачи более высокого уровня. В таком случае у вас всегда всё будет работать надёжно и предсказуемо.
А ваш код я не видел, так что помочь ничем не могу. Причин, по которым происходят глюки, может быть много, и нужно быть телепатом, чтобы угадать, что именно происходит в вашей реализации кода. Но я видел много примеров, когда люди что-то делали, не понимая полностью логики явления, которое они разрабатывают. (Например, модальный диалог, или галлерею, или кнопку. Или космический корабль.) Из-за этого их код превращается в запутанный клубок, который глючит в самые неожиданные моменты.
Простой
