2

Как сделать так, чтобы при использовании стандартного всплывающего bootstrap модального окна фон страницы не затемнялся, а наоборот становился чуть светлее или менялся каким-либо образом параметр прозрачности. Я поискал стандартные параметры в документации, но не нашел такой возможности. https://v4-alpha.getbootstrap.com/components/modal/? Спасибо.

0

1 ответ 1

3

В css задвайте стили фону:

@import "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css";

.modal-backdrop {
  background: #fff;
}

.modal-backdrop.show {
  opacity: .8;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
  
  <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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>

4
  • А !important точно нужен?
    – Qwertiy
    19 дек 2017 в 22:19
  • @Qwertiy, это тут на stack почему-то style не перебивает бутстраповские стили, а так не нужен, у меня и без него перебивает нормально
    – SVE
    20 дек 2017 в 6:44
  • А, ясно. Это потому что у тебя тут получается твой стиль в head, а бутстраповский в body. Поправил :)
    – Qwertiy
    20 дек 2017 в 7:39
  • @Qwertiy, спасибо
    – SVE
    20 дек 2017 в 7:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.