Я использую модальное окно начальной загрузки, а кнопка закрытия - это изображение. Когда модальный размер изменяется в зависимости от области просмотра, я хочу, чтобы кнопка закрытия всегда оставалась в правом верхнем углу модального окна.

<div id="myModal" class="modal modal fade">
    <a class="close-modal" href="javascript:void(0)" onclick=closeModalBox()>
        <img src="images/close.png" width="39" >
    </a>
    <div class="modal-dialog">
        <div class="modal-content" style="position: relative;">
            <div class="modal-body" >
              <!-- code -->
            </div>
        </div>
    </div>
</div>

CSS:

.close-modal {
    margin: 0;
    position: absolute;
    opacity: 1;
    z-index: 10;
    cursor: pointer;
    top: 1%;
    left: 77%;
} 
.modal-content{
    position: relative; 
}

Любые идеи? Благодарность

0
Sofia Lazrak 6 Июл 2021 в 15:57

3 ответа

Лучший ответ

Кажется, есть проблема со структурой html, см. Пример ниже, чтобы удерживать кнопку закрытия в правильном положении. также обратитесь по этой ссылке. Модальный

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
1
Munei Nengwenani 6 Июл 2021 в 13:08

Вы хотите удерживать кнопку при прокрутке вниз? В этом случае используйте "липкую" переменную,

https://getbootstrap.com/docs/4.0/utilities/position/

0
11thJester 6 Июл 2021 в 13:03

Вы используете процентные значения, которые будут визуально меняться при переходе между размерами устройства. Установите для них фиксированные значения, чтобы ваша кнопка закрытия всегда находилась в определенном месте относительно размера устройства. Кроме того, поскольку вы используете абсолютное позиционирование, вы можете вместо этого воспользоваться атрибутом «right». https://www.w3schools.com/cssref/pr_pos_right.asp

.close-modal {
margin: 0;
position: absolute;
opacity: 1;
z-index: 10;
cursor: pointer;
top: 50px; // define your value here
right: 80px; // define your value here
}
0
S Henry 6 Июл 2021 в 13:09