Форма оверлея Bootstrap spinner (не вся страница)

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

<style>
    .overlay {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 1000;
        top: 40%;
        left: 0px;
        opacity: 0.5;
        filter: alpha(opacity=50);
    }
</style>

<div class = "overlay" id = "loading" >
    <div class = "d-flex justify-content-center">
        <div class = "spinner-border" role = "status" >
            <span class = "sr-only">Loading...</span>
        </div>
    </div>
</div>

<form method = "post">
    <div class = "form-group">

        <label for = "num">Enter number <span>?</span></label>
        <input id = "num" type = "text" class = "form-control"/>
       
    </div>
    <button type = "submit" class = "btn btn-primary">Check </button>
</form>

html css bootstrap-4

13.12.2020 16:35

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

3 268

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны поместить счетчик внутри вашей формы, как это


<form method = "post">
  <div class = "overlay" id = "loading" >
    <div class = "d-flex justify-content-center">
      <div class = "spinner-border" role = "status" >
        <span class = "sr-only">Loading...</span>
      </div>
    </div>
  </div>
  <fieldset disabled>
    <div class = "form-group">
      <label for = "num">Enter number <span>?</span></label>
      <input id = "num" type = "text" class = "form-control"/>
    </div>
    <button type = "submit" class = "btn btn-primary">Check </button>
  </fieldset>
</form>

затем дайте счетчику абсолютную позицию

form {
  position: relative;
  border: 1px solid red
}
.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0.5;
  transform: translate(-50%, -50%);
}

Свойства CSS top и left задают координаты X/Y, где должен находиться верхний левый угол (или верхний правый угол в rtl-директории) вашего элемента. Если вы хотите, чтобы счетчик был действительно центрирован, вам нужно добавить свойство transform с translate(-50%, -50%);, чтобы он получил X = 50% минус половина его ширины и Y = 50% минус половина его высоты.

— 13.12.2020 16:59

Ки Джей, кажется, я не понял, в чем проблема с ответом выше?

— 13.12.2020 18:05

@renathy Увидишь, что он имеет в виду, если ты вырастишь спиннер, я обновлю свой ответ

— 13.12.2020 18:30

Я вижу, я исправил это. Может быть, вы также можете подсказать, как сделать форму отключенной или неактивной при появлении загрузчика? В настоящее время ti кликабельно

— 13.12.2020 20:21

Оберните входную группу в <fieldset> и присвойте ей отключенный атрибут. @ренати

— 18.12.2020 08:48

13.12.2020 16:53