Question

我快速编写了CodePen以突出显示该问题。

https://codepen.io/robbullock/pen/NwWqYE

1）将鼠标悬停在卡片上 2）点击＆＃34;请求访问＆＃34;按键 3）鼠标离开屏幕，模态消失，不会再回来。

我认为造成问题的问题在于＆＃34; .content .content-overlay＆＃34;下面的课程，以及相应的悬停效果。

.content .content-overlay {
background: rgba(51, 51, 51, 0.9);
position: absolute;
height: 270px;
width: 270px;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
border-radius:8px;
}

.content:hover .content-overlay {
opacity: 1;
}

.content:hover .content-details {
top: 50%;
left: 50%;
opacity: 1;
}

有没有办法阻止这种行为？

Answer 1

这是因为你已经将.content-overlay元素保持为未闭合，因此它也包装了模态元素。因此，当您将鼠标移出页面时，:hover规则不适用，并且模式会随着容器的隐藏而消失。

请参阅https://codepen.io/anon/pen/mqdedj

Answer 2

将模态移出＆lt; li>标签

<li class="col-md-4 content allAvail">
  <div class="card">
    <div class="card-block">
      <p class="card-title-none">Title</p>
      <p class="card-type">text</p>
    </div>
  </div>

  <div class="content-overlay">
    <div class="card-content content-details-noaccess fadeIn">
      <div class="about">About</div>
      <div class="description">text and some stuff</div>

      <button type="button" class="button primary-request" data-toggle="modal" data-target="#myModal">Request Access</button>

      <a href="/">
        <button class="button secondary-btn-noaccess">View Details</button>
      </a>
    </div>


    <!-- CC MODAL ACCESS -->

  </div>
</li>
<!-- END MODAL -->
<div id="myModal" class="modal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>

</div>

当鼠标关闭浏览器窗口时，bootstrap模态消失，不返回

2 个答案: