Потрясающий пример того, когда НЕ следует использовать JavaScript... тем более список того, как не использовать JavaScript, который представляет собой jQuery, или памятник невежеству, некомпетентности и некомпетентности разработчиков, который является бут дерьмом. Дело не в вас, дело в простом существовании и 3i людей, которые создали эти дурацкие системы ведения дел.
Черт, одно только присутствие «клирфикса» должно быть достаточным предупреждением, что вас обманули люди, которые не вытащили свои черепа из прямой кишки 2003/раньше.
Хотя ваш неполный код не показывает, где они открываются, такие модальные окна являются вероятным кандидатом либо для подхода :target, либо для метода input:checked.
Давайте рассмотрим предыдущий метод в качестве примера:
Код:
function modalClose(e) {
window.history.back();
e.preventDefault();
}
var closeAnchors = d.getElementsByClassName('modalClose');
for (var i = 0, a; a = closeAnchors[i]; i++) {
window.addEventListener(click, modalClose, false);
}
Код (разметка): для этого не требуется даже ни одной строки JavaScript, если только вам ДЕЙСТВИТЕЛЬНО не нужна поддержка IE8/более ранних версий, поскольку даже IE9 поддерживает :target. Поскольку вы используете буткрап, который стал гибким, вы даже больше не совместимы с IE9.
.modal, .modal > a { width:100%; height:100%; top:0; } .modal { position:fixed; left:-100%; display:flex; overflow:auto; } .modal > a { position:absolute; left:0; } .modal:target { left:0; } .modal > div { position:relative; /* depth sort over outer a } Код (разметка): использование переходов CSS для анимации по мере необходимости. Внутренний якорь .modalClose будет оформлен в соответствии с стилем вашей кнопки закрытия. Вы можете разместить несколько из них на странице с НУЛЕВЫМИ проблемами, поскольку простое посещение href="#demo01" поможет. Опять же, не требуется ни строчки сценария!
САМОЕ САМОЕ, что я хотел бы сделать с JavaScript, — это усовершенствовать кнопку закрытия, чтобы она выполняла window.history.back вместо того, чтобы следовать за #.
<div id="demo01" class="modal"> <a href="#" class="modalClose"> <div> <a href="#" class="modalClose"> <h2>Demo01<br /> Web-Studios</h2> <p> Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value. Quickly promote premium strategic theme areas vis-a-vis. </p><p> Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value. </p> <img src="img/portfolio/02.jpg" alt="ОПИСАЙТЕ ЭТО ИЗОБРАЖЕНИЕ, ALT НЕ НЕОБЯЗАТЕЛЬНО" class="plate" > <p> Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value. Quickly promote premium strategic theme areas vis-a-vis. </p><p> Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value. </p> </div> <!-- #demo01.modal --></div> Код (разметка): Просто чтобы вы не заливали историю #. Все еще работает скриптинг отключен, скрипты просто улучшают уже работающую страницу.
Дополнительную информацию см. в этих моих статьях, в которых описываются подходы input:checked и .modal:target.
https://cutcodedown.com/tutorial/modalDialogs https://cutcodedown.com/tutorial/mobileMenu Нижняя граница? Вот почему я считаю интерфейсные фреймворки памятником 3i. Невежество, некомпетентность и некомпетентность. Люди, которые создали мусор, такой как буткрап и jqueery, имеют НОЛЬ взорванного бизнеса и рассказывают кому угодно, как создать веб-сайт.
