Bootstrap Modal关闭后CSS过渡关闭

我正在致力于改善我的CSS和HTML技能的网站。我是来自德国的学生。Bootstrap Modal关闭后CSS过渡关闭

作为框架我使用Bootstrap。我实现了一个简单的CSS转换和一个打开Bootstrap模式的链接。

不幸的是，在关闭模态后，过渡效果被打破。这是只有当打开一个Modal。其他每个链接都没有影响。这里的HTML：

<section id="Leistungen"> 
     <div class="container"> 
      <h1>Leistungen</h1> 
      <div class="row"> 
       <div class="col-xs-4"> 
        <div id="hoertest" class="box"> 
         <div class="leistungcontent"> 
          <h3>kostenloser Hörtest</h3> 
          <br> 
          <p> <a class="button" data-toggle="modal" href="#modalHoertest">weitere Infos</a> </p> 
          <br> 
         </div> 
        </div> 
       </div> 
     ... 



<div id="modalHoertest" class="modal fade" role="dialog"> 
      <div class="modal-dialog"> 
       <!--Modal Inhalt--> 
       <div class="modal-content"> 
        <div class="modal-header"> <img src="img/Bilder/hoertest.jpg" class="img-responsive"> </div> 
        <div class="modal-body"> 
         <h3>kostenloser Hörtest</h3> 
         <p> Eine Hörminderung kann schleichend zunehmen, ohne dass Sie es bemerken. Es können auch nur bestimmte Frequenzbereiche betroffen sein. Lassen Sie Ihr Gehör kostenlos überprüfen, um eine eventuelle Hörminderung festzustellen. </p> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button> 
        </div> 
       </div> 
      </div> 
     </div>

而CSS：

/* Modals */ 
.modal-content { 
    border-radius: 0px; 
} 

.modal-header { 
    margin: 0; 
    padding: 0; 
} 

#Leistungen .col-xs-4 { 
    padding: 0; 
} 
.box{ 
    width: 100%; 
    height: 300px; 
    margin: 0; 
    padding: 0; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    -webkit-box-pack: end; 
    -ms-flex-pack: end; 
    justify-content: flex-end; 
    background-color: rgb(233,93,14); 
    border: 2px solid white; 
    overflow: hidden; 
} 

.leistungcontent { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    background-color: rgba(255,255,255,0.8); 
    -webkit-transform: translateY(50%); 
    transform: translateY(50%); 
    -webkit-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
} 

#Leistungen .box:hover .leistungcontent, 
#Leistungen .box:focus .leistungcontent{ 
    -webkit-transform: translateY(0%); 
    transform: translateY(0%); 
} 

#hoertest { 
    background: url('../img/Bilder/hoertest.jpg') 25% 50%; 
    background-size:cover; 
}

第一悬停一切工作正常。透明的div来揭示链接。点击链接后，模式打开。一切都很好。然后关闭Modal后，透明盒不会隐藏。

我用Chrome和Firefox测试了这个。在Firefox中，bug也存在，但是在再次悬停在div上之后，它自行修复。

图片：

点击链接之后和在关闭模态

after clicking on the link and after closing the modal

下面是一个与codepen后没有点击该链接尚未

上问题：http://codepen.io/anon/pen/qaJXkR

前两个正方形是相关的。在第三行（顶行）是一个链接到谷歌，显示，正常的链接不会导致我的问题。

来源

2016-10-18 Johannes

考虑增加一个工作演示的情况下，这样的问题可以复制。您可以使用[Stack Snippet]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）或第三方IDE（如jsfiddle） .net或codepen.io。 –

我认为这个问题是你的css代码。因为在关闭模态后透明div仍然集中。删除下列行：

#Leistungen .box:focus .leistungcontent

编辑：使用JS代替数据肘节解决问题打开一个模式。例如对于一个onClick：https://jsfiddle.net/n4novda1/1/

来源

2016-10-18 11:51:18 ManuManfred

谢谢，但那并没有解决问题。行为是一样的。 – Johannes

最后我找到了一个解决方案。真正的问题是引导数据切换。如果您单击按钮打开模式，浏览器不会删除：悬停pesudo类。我不知道为什么。只需打开模式与JS工作正常：[https://jsfiddle.net/n4novda1/1/](https://jsfiddle.net/n4novda1/1/） – ManuManfred

谢谢！这解决了这个问题。 – Johannes

你可以尝试使用应用一些CSS样式：参观，看看是否导致问题，也许忽略它，如果这是

来源

2016-10-18 11:53:39 Benediah

Bootstrap Modal关闭后CSS过渡关闭

回答

相关问题