Если в определении класса изменения модального диалогового окна начальной загрузки оно не закрывается

Привет, В laravel 5, jquery 3, bootstrap 4.4, Blade-приложении я использую модальные диалоги с такими методами, как открытие:

 
$("#div_check_in_storage_space_modal").modal('hide');

Код (JavaScript): и закрытие

 <div class="modal fade" tabindex="-1" role="dialog" id="div_check_in_storage_space_modal" aria-labelledby="check_in_storage_space_modal_label" aria-hidden="true"> <div class="modal-dialog-full-width" role="document"> <div class="modal-content-full-width"> <div class="modal-header-full-width"> TITLE </div> <div class="modal-body-full-width"> BODY 

Код (JavaScript): и в шаблоне лезвия:

 <div class="modal fade" tabindex="-1" role="dialog" id="div_check_in_storage_space_modal" aria-labelledby="check_in_storage_space_modal_label" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="check_in_storage_space_modal_label"> TITLE </h4> <button type="button" class="close" onclick="javascript:bookingsAndAvailability.cancelAddNewClient()" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> BODY

HTML: Все модальные классы имеют фиксированную ширину, и все работает нормально. Но для одного из моих диалогов мне нужно было увеличить ширину открытого модального диалога, и я переделал свой шаблон лезвия:

  bookingsAndAvailability.prototype.cancelAddNewClient = function () { console.log('?? cancelAddNewClient::') $("#div_check_in_storage_space_modal").modal('hide'); ... 

HTML: и в моем файле scss я определил большую ширину для всех классов -full-width, но при этом код в cancelAddNewClient больше не работает, и диалог не закрывается выглядит как

  ... $("#div_check_in_storage_space_modal").modal({ "backdrop": "static", "keyboard": true, "show": true }); ... 

Код (JavaScript): перестает работать с -full-width, определенным в модальном режиме. Как я могу это исправить? Спасибо!

На дворе 2020, а не 2002 год. Модальные диалоги — по крайней мере, их базовая функциональность — НЕ относятся к переворачивающемуся бизнесу JavaScript. Хотя ваша НАСТОЯЩАЯ проблема здесь в том, памятниками невежеству, некомпетентности и некомпетентности разработчиков являются эти дурацкие фреймворки.

Почему? Потому что они заставляют вас использовать JavaScript для вещей, которые не относятся к JS, таким образом, что нарушается доступность и удобство использования. (таким образом, что в зависимости от сайта вы можете попасть в суд), написав во много раз больше кода, чем нужно, и при этом, очевидно, не научившись даже правильно писать HTML.

Например, DIV не может быть сфокусирован, поэтому у него даже нет индекса табуляции, использование класса DIV +, вероятно, для выполнения работы H2, наличие нескольких экземпляров класса переноса ширины на Рождество, только знает что.

конечным результатом является поезд Разрушьте список того, как НЕ писать HTML или CSS. Отбросьте всю эту умственную ерунду, которая заставляет вас писать в два-десять раз больше необходимого HTML, использовать JavaScript для вещей, которые не относятся к JS, и так далее.

Затем:

 #sample section {
width:100%;
max-width:24em;
}

Код (разметка): Для разметки, а затем:

  (function(d) { d.body.addEventListener('keydown', function(e) { if ( (e.keyCode == 27) && (location.hash.length > 1) ) { var target = d.getElementById(location.hash.substr(1)); if (target && (target.className == 'modal')) { location.hash = '#'; } } }, false); })(document);

Код (разметка): 99% модальных функций выполняются без использования скриптов.

Затем JS мог бы улучшить его, добавив крючок для клавиши escape, чтобы закрыть его.

Качественный JavaScript УЛУЧШАЕТ уже работающую страницу, а не является единственным средством ее функциональности.

Следовательно, почему дерьмовое использование JS для мобильных меню — это полный мусор.

 .modalFix, .modal, .modal > .modalClose { position:absolute; top:0; left:0; width:100%; height:100%; overflow:auto; } .modal .modalClose { text-decoration:none; } .modal { overflow:auto; position:fixed; display:flex; padding:1em; left:-100%; background:rgba(224,224,224,0.9); box-shadow: inset 0 0 128px 128px rgba(0,0,0,0.1); opacity:0; transition:left 0s 0.5s, opacity 0.5s; } .modal:target { left:0; opacity:1; transition:opacity 0.5s; } .modal section { overflow:hidden; position:relative; top:-50vh; margin:auto; background:#FFF; border:1px solid #777; border-radius:0.25em; box-shadow: 0 0.25em 0.75em rgba(0,0,0,0.2); transition:top 0.5s; } .modal:target section { top:0; } .modal h2 { position:relative; padding:0.33em 0.66em; margin-bottom:0.66em; background:#CCC; border-bottom:1px solid rgba(0,0,0,0.7); } .modal h2 .modalClose { float:right; font-size:1.2em; line-height:1.2em; color:#000; } .modal h2 .modalClose:before { content:"\01F5D9"; vertical-align:bottom; }

Код (разметка): Все в красивом маленьком IIFE, поэтому он невидим для всего остального кода, не требуется никакой «Framework» BS. Единственное, что необходимо для открытия модального окна, — это Открыть модальное окно

, где modalId — это идентификатор указанного модального окна. Если вам «нужно» запустить его с помощью JavaScript, говоря большому количеству пользователей, чтобы они сами пошли ****, просто назначьте location.hash. Живая демонстрация здесь:
https://cutcodedown.com/for_others/mstdmstd/modals/

Я также добавил туда модальное окно входа, чтобы вы могли видеть, как оно работает.

Он начинается как гибкий, поэтому сжимается до содержимого, но вы можете легко установить минимальную или максимальную ширину с помощью идентификатора.

Например, модальное окно #login на этой странице свернуто, но модальное окно #sample получает:

 <div class="modal" id="sample"> <a href="#" class="modalClose"></a> <section> <h2> <a href="#" class="modalClose"></a> Title </h2> <p>Content</p> </section> <!-- #sample.modal --></div>

Код (разметка): Таким образом, он заполняет ширину экрана максимум до 24em. Просто настройте тег раздела внутри связанного идентификатора с любой шириной, которую вы хотите.

Bootcrap и jQuery — как и все эти другие умственно отсталые «фреймворки» — просто заставляют вас работать усерднее, а не умнее, и в процессе говорят пользователям с доступностью, что им нужно пахать самостоятельно.

Любой, кто говорит вам обратное, недостаточно разбирается в HTML или CSS, чтобы разглагольствовать по этой теме.

Все, что они делают, это предоставляют вам сломанные бессмысленные раздутые примеры того, как НЕ следует что-то делать.

КАЖДОЕ проклятое заявление о том, что они «проще» или «лучше для совместной работы» и т. д., является НАГЛАЯ ЛОЖЬ! ПРЕКРАТИТЕ использовать классы во всем, ПРЕКРАТИТЕ использовать классы для представления и вместо этого говорите, что ЕСТЬ, и ПРЕКРАТИТЕ использовать несемантическую разметку!