Bootstrap 4 Модальное открытие / закрытие вызывает изменение положения изображения - PullRequest
Новая
       8

Bootstrap 4 Модальное открытие / закрытие вызывает изменение положения изображения

1 голос
/ 21 января 2020

У меня следующий простой фрагмент кода, который открывает модал bs4 через кнопку.

Кнопка появляется при наведении на контейнер.

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

https://jsfiddle.net/hb6n71zg/1/ фрагмент кода ссылки. 

.container {
  position: relative;
  overflow: hidden;
}

.p-img {
  opacity: 1;
  width: 100%;
  transition: 0.5s ease;
}

.p-capt {
  background: white;
  width: 100%;
  transition: 0.5s ease;
  opacity: 0;
  position: absolute;
  bottom: -10%;
  text-align: center;
}

.container:hover .p-img {
  opacity: 0.3;
}

.container:hover .p-capt {
  opacity: 1;
  bottom: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<h2>TOPTOPTOP</h2>
<p>TOPTOPTOPTOPTOP</p>

<div class="container">
  <img class="p-img w-100" src="https://www.wired.com/wp-content/uploads/2015/09/google-logo.jpg" />
  <div class="p-capt">
  <button type="button" class="btn btn-primary w-100" data-toggle="modal" data-target="#myModal">launch modal</button>
  </div>
</div>


<!-- Modal -->
<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">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">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Обновление:

Если я переключу модальное значение через javascript, это странное поведение не произойдет. 

<button type="button" class="btn btn-primary w-100">launch modal</button>

$(function(){
    $("button").click(function() {
    $("#myModal").modal('toggle');
  });
});

1 Ответ

0 голосов
/ 22 января 2020

Это связано с очень странной комбинацией между тремя различными условиями:

  • .container с overflow: hidden;
  • .container с переполнением содержимого
  • .container не будет :hover ed, если вы не двигаете мышь, когда модальное окно закрывается.

Решение состоит в том, чтобы удалить overflow:hidden из .container и получить эффект обрезки кнопки: кнопка с помощью собственного контейнера кнопки (.p-cont): 

.container {
  position: relative;
}

.p-img {
  opacity: 1;
  width: 100%;
  transition: 0.5s ease;
  height: auto;
}

.p-capt {
  background: white;
  width: 100%;
  transition: 0.5s ease;
  opacity: 0;
  position: absolute;
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
  overflow: hidden;
  bottom: 0;
  height: 0;
}

.p-capt .btn-primary {
  position: relative;
  left: -15px;
}

.container:hover .p-img {
  opacity: 0.3;
}

.container:hover .p-capt {
  opacity: 1;
  height: 38px;
}


/* this removes the button's outline when active, as IMHO it didn't look right (it was cut off by the overflow:hidden. Totatlly optional, of course */

.p-capt .btn-primary:not(:disabled):not(.disabled).active:focus,
.p-capt .btn-primary:not(:disabled):not(.disabled):active:focus,
.p-capt .show>.btn-primary.dropdown-toggle:focus,
.p-capt .btn-primary.focus,
.p-capt .btn-primary:focus {
  box-shadow: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<h2>TOPTOPTOP</h2>
<p>TOPTOPTOPTOPTOP</p>

<div class="container">
  <div class="row">
    <div class="col">
      <img class="p-img d-block w-100 h-auto" src="https://www.wired.com/wp-content/uploads/2015/09/google-logo.jpg" />
      <div class="p-capt">
        <button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#myModal">launch modal</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal -->
<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">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">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Примечание: я также использовал Bootstrap v4.4.1 вместо вашего v4.0.0, но это не влияет на пример. Я просто хотел убедиться, что причина не в этом, и не стал его менять.

...