Предотвратить Bootstrap модальное окно прокрутки - PullRequest
0 голосов
/ 16 июня 2020

Я создаю сайт на 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">&times;</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>

То, что я пробовал

  1. Я полностью опустошил modal-content. Выглядит все так же, только с белым.
  2. Я проверил версию таблиц стилей сверху. Они обновлены.
  3. Я попытался вмешаться в инструменты разработчика и восстановить реальный классический дизайн модального окна. Но я не знаю, какие css -атрибуты могут вызвать такое странное отображение.

Что я ищу?

Я ищу объяснение, почему Bootstrap считает, что мой модальный режим должен быть прокручиваемым, а также как это удалить. Какие атрибуты css мне следует искать?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...