Question

我正在一个网站上改进我的CSS和HTML技能。我是来自德国的学生。

作为一个框架，我使用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出现以显示链接。单击链接后，模式将打开。一切都很好。然后在关闭模态后，透明框不会隐藏回来。

我使用Chrome和Firefox进行了测试。在Firefox中，错误也存在，但是在将其重新悬停在div之后，它会自行修复。

图片：

尚未点击链接

not clicked on the link yet

点击链接后关闭模态

after clicking on the link and after closing the modal

这是一个有问题的codepen：http://codepen.io/anon/pen/qaJXkR

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

Answer 1

我认为问题是你的css代码。因为透明div在关闭模态后仍然是聚焦的。删除以下行：

#Leistungen .box:focus .leistungcontent

编辑：使用JS而不是数据切换打开模式来解决问题。例如onClick：https://jsfiddle.net/n4novda1/1/

Answer 2

您可以尝试使用以下方法应用一些CSS样式：访问以查看是否导致问题，如果是这种情况可能会覆盖它

关闭Bootstrap Modal后，CSS Transition已损坏

2 个答案: