Блог

Главная - Вопросы по программированию - Форма наложения Bootstrap spinner (не целая страница)

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

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

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

Ответ №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%);
}

Комментарии:

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

2. Ки Джей, я думаю, я не понял, в чем проблема с ответом выше?

3. @renathy Вы увидите, что он имеет в виду, если вы увеличите счетчик, я обновлю свой ответ

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

5. Оберните группу ввода в a <fieldset> и присвоите ей атрибут disabled . @renathy