Question

我正在使用引导模态来显示一些信息，当我单击第一个项目时，模态下降了，但是该项目停留在胡佛中，我不想要它。所以我制作了js并解决了这个问题，但是它不会再次激活该项目上的点击。

因此js使悬停消失并使其再次出现，但它不会让我单击以再次打开模式。

function setHover() {
    $('.chata')
    .css({ 'opacity': '0' })
    .off('mouseover mouseleave click')
    .on({
        mouseover: function () {
            $(this).css({ 'opacity': '1' });
        },
        mouseleave: function () {
            $(this).css({ 'opacity': '0' });
        },
        click: function () {
            $('.chata').off('mouseover mouseleave click');
            $(this).css({ 'opacity': '0' });
            setHover();
        }
    });
}


setHover();

.overlayy {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
}


    .overlayy:hover {
        opacity: 1;
    }

.text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.imageee {
    display: block;
    width: 100%;
    height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">

    <div class="col-lg-3 col-md-3 projectos text-center containeer">

        <img src="assets/img/cofre.png" class="imageee">
        <a id="pop1" href="#" class="poppers overlayy chata"><img src="assets/img/address.png"></a>
        <div class="modal fade" id="exampleModalLong" tabindex="1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content border border-light rounded-0">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Carteira Portuguesa</h5>
                        <div class="modelxclose" data-dismiss="modal" aria-label="Close"></div>
                    </div>
                    <div class="modal-body">
                        Conteudo vai
                    </div>
                    <div class="modal-footer opacityPulse-css">
                        <p class="font-weight-bold modelpfooter">We Made it. - 2018</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-3 projectos text-center containeer self_clear">

        <img src="assets/img/cofre.png" class="imageee">
        <a id="pop2" href="#" class="poppers overlayy"><img src="assets/img/address.png"></a>
        <div class="modal fade" id="exampleModalLong" tabindex="2" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content border border-light rounded-0">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Carteira Portuguesa</h5>
                        <div class="modelxclose" data-dismiss="modal" aria-label="Close"></div>
                    </div>
                    <div class="modal-body">
                        Conteudo vai
                    </div>
                    <div class="modal-footer opacityPulse-css">
                        <p class="font-weight-bold modelpfooter">We Made it. - 2018</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-3 projectos text-center containeer self_clear">

        <img src="assets/img/cofre.png" class="imageee">
        <a id="pop3" href="#" class="poppers overlayy"><img src="assets/img/address.png"></a>
        <div class="modal fade" id="exampleModalLong" tabindex="3" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content border border-light rounded-0">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Carteira Portuguesa</h5>
                        <div class="modelxclose" data-dismiss="modal" aria-label="Close"></div>
                    </div>
                    <div class="modal-body">
                        Conteudo vai
                    </div>
                    <div class="modal-footer opacityPulse-css">
                        <p class="font-weight-bold modelpfooter">We Made it. - 2018</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3 projectos text-center containeer self_clear">

        <img src="assets/img/cofre.png" class="imageee">
        <a id="pop4" href="#" class="poppers overlayy"><img src="assets/img/address.png"></a>
        <div class="modal fade" id="exampleModalLong" tabindex="4" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content border border-light rounded-0">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Carteira Portuguesa</h5>
                        <div class="modelxclose" data-dismiss="modal" aria-label="Close"></div>
                    </div>
                    <div class="modal-body">
                        Conteudo vai
                    </div>
                    <div class="modal-footer opacityPulse-css">
                        <p class="font-weight-bold modelpfooter">We Made it. - 2018</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

将data-toggle="modal"和data-target="#exampleModalLong"添加到您的链接中，如下所示：

<a id="pop1" data-toggle="modal" data-target="#exampleModalLong" href="#" class="poppers overlayy chata">Image here</a>

用您希望每个链接打开的模态替换目标。另外，请勿为多个模态赋予相同的ID，ID必须是唯一的。

https://jsfiddle.net/Sirence/1wktbzfc/

禁用鼠标悬停，然后重新启用，但单击将无法再次使用

1 个答案: