Я создаю сайт на Wordpress 5.2.4. В настоящее время я создаю подстраницу для участников, где они могут бронировать смены и удалять их, нажимая кнопку или флажок. Оба действия требуют чтения модального окна (всплывающего окна), созданного bootstrap -layout. Вот как включаются, так и модальный код:
<link rel="stylesheet" id="bootstrap-style-css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css?ver=5.4.2" type="text/css" media="all">
<link rel="stylesheet" id="modal-style-css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.6/css/bootstrap-modal.min.css?ver=5.4.2" type="text/css" media="all">
<link rel="stylesheet" id="modalbs3-style-css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.6/css/bootstrap-modal-bs3patch.min.css?ver=5.4.2" type="text/css" media="all">
<!-- the actual page -->
<!-- the modal -->
<div class="modal" id="delete-reservation-modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Schicht-Reservation löschen</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div>Sind Sie sich sicher, dass Sie die Reservation dieser Schicht löschen möchten? Die Schicht wir dann für andere Mitglieder freigegeben und ist unter 'Alle Schichten' sichtbar.</div>
</div>
<div class="modal-footer">
<form action="<?php echo esc_url( admin_url('admin-post.php') )?>" method="post">
<input type="hidden" name="schicht_id" value="">
<input type="hidden" name="action" value="reservation_cancel_form">
<!--input type="hidden" name="fk_user_id" value="<?php //echo $current_user->ID ?>"-->
<button type="submit" id="btn-confirm-del" class="btn btn-primary">Ja</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Nein</button>
</form>
</div>
</div>
</div>
</div>
Открытие модального окна и его обработка на стороне бэкэнда работает нормально.
Проблема
Несмотря на то, что модальное окно не содержит большого количества текста или содержимого, оно занимает всю высоту экрана и его можно прокручивать. Bootstrap, очевидно, создает еще одну строку кода в DOM. Это родительский элемент кода, который я описал выше, и добавляет класс modal-scrollable
. Кроме того, bootstrap изменяет первую строку модального кода выше и добавляет класс modal-overflow
.
<div class="modal-scrollable" style="z-index: 1060;">
<div class="modal fade modal-overflow in" id="delete-reservation-modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block; margin-top: 0px;">
<!-- modal content and stuff-->
</div>
</div>
То, что я пробовал
- Я полностью опустошил
modal-content
. Выглядит все так же, только с белым. - Я проверил версию таблиц стилей сверху. Они обновлены.
- Я попытался вмешаться в инструменты разработчика и восстановить реальный классический дизайн модального окна. Но я не знаю, какие css -атрибуты могут вызвать такое странное отображение.
Что я ищу?
Я ищу объяснение, почему Bootstrap считает, что мой модальный режим должен быть прокручиваемым, а также как это удалить. Какие атрибуты css мне следует искать?