时间戳

首页 > 解决方案 > Bootstrap 4 模态打开/关闭导致图像位置改变

css - Bootstrap 4 模态打开/关闭导致图像位置改变

问题描述

我有以下简单的代码片段，它通过一个按钮打开一个 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');
  });
});

标签： csstwitter-bootstrapbootstrap-4modal-dialog

解决方案

它与三种不同条件之间非常奇怪的组合有关：

  • .container有overflow: hidden;
  • .container内容溢出
  • .container:hover除非您在模态关闭时移动鼠标，否则不会被编辑。

解决方法是通过按钮自身的容器（）去掉overflow:hiddenfrom .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>

注意：我也使用了 Bootstrapv4.4.1而不是你的v4.0.0，但它不影响示例。我只是想确保这不是原因，并没有费心把它改回来。

推荐阅读