Question

我正在尝试对某些具有悬停效果并进行transform：translate的元素（图，figcaption）中的按钮实施引导模式。我面临的问题是，一旦单击打开模态并关闭模态的按钮，元素（图和figcaption）就会折断并看上去。

我已上传到Codepen，因此您实际上可以理解我的意思：https://codepen.io/cucurutcho/pen/rqBBKe

        <!-- portfolio item 01 -->
        <figure class="port-item">
            <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="portfolio item">
            <figcaption class="port-description">
                <p>Project Title</p> 
                <button class="button button-accent button-small" data-toggle="modal" data-target="#largeModal">Project Details</button>
            </figcaption>
        </figure>

        <!-- portfolio item 02 -->
        <figure class="port-item">
            <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="portfolio item">
            <figcaption class="port-description">
                <p>Project Title</p>
                <a href="" class="button button-accent button-small">Project Details</a>
            </figcaption>
        </figure>

        <!-- portfolio item 03 -->
        <figure class="port-item">
            <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="portfolio item">
            <figcaption class="port-description">
                <p>Project Title</p>
                <a href="" class="button button-accent button-small">Project Details</a>
            </figcaption>
        </figure>
    </section>

<!-- large modal -->
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Large Modal</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>Modal Body</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


    body {
    margin: 0;
    font-family: 'Raleway', sans-serif;
    text-align: center;
    background-color: #1c1c1e;
    color: #ffffff;
}

img {
    max-width:100%;
    height: auto;
}


.clearfix::after,
section::after,
footer::after {
    content: '';
    display: block;
    clear:both;
}

/* Buttons */

.button {
    display: inline-block;
    font-size: 1.15rem;
    text-decoration: none;
    text-transform: uppercase;
    border-width: 2px;
    border-style: solid;
    padding: .5em 1.75em;
    background:transparent;
}

@media (min-width: 60rem) {
    .button {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 768px){
    .button-dark {
        width:30%;
        font-size:14px;
    }
}

.button-small {
    font-size: .7rem;
    font-weight: 700;
}

.button-accent {
    color:#ffffff;
    border-color: #be2341;
}

.button-accent:hover,
.button-accent:focus
{
    background:#be2341;
    color:#ffffff;
    text-decoration: none;
}

.button-dark {
    color:#232323;
    border-color: #232323;
}

.button-dark:hover,
.button-dark:focus
{
    background:#232323;
    color:#ffe600;
    text-decoration: none;
}


/* Portfolio */

.portfolio {
    margin: 3em 0 0;
}

.port-item {
    margin: 0;
    position: relative;
}

.port-item img {
    display: block;
}

.port-description {
    position: absolute;
    z-index: 100;
    bottom: 0em;
    left: 0em;
    right: 0em;
    color: white;
    background: rgba(0,0,0, .6);
    padding-bottom: 1em;
}

.port-description p {
    margin: 1em;
}

@media (min-width: 37rem) {
    .port-item {
        width: 50%;
        float:left;
    }
}

@media (min-width: 60rem) {

    .port-item {
        width: 33.3333334%;
        overflow: hidden;
    }

    .port-description {
        transform: translateY(150%);
    }

    .port-item:hover .port-description {
        transform: translateY(0%);
        transition: all ease-in-out 200ms;
    }

}

你们对为什么会发生这种情况以及如何解决这个问题有任何想法吗？

为大家加油！

Answer 1

CSS 的更改：

.port-description { display:none; }
.port-item:hover .port-description  {display:block; animation:revealFromBottom .5s; }
    @keyframes revealFromBottom {
        from { bottom:-100px;}
        to { bottom:0%;}
    }

jQuery 的更改：

$(document).ready(function(){
        $('.button').focus(function(){
            $('body').addClass('modal-open');
            $('#largeModal').addClass('in');
            $('#largeModal').css('display', 'block');
            $('.modal-backdrop').css('display', 'block');
        });
        $('.modal-footer .btn ').click(function(){
            $('body').removeClass('modal-open');
            $('#largeModal').removeClass('in');
            $('#largeModal').css('display', 'none');
            $('.modal-backdrop').css('display', 'none');
        });
        $('.modal-header .close ').click(function(){
            $('body').removeClass('modal-open');
            $('#largeModal').removeClass('in');
            $('#largeModal').css('display', 'none');
            $('.modal-backdrop').css('display', 'none');
        });
    });

要获取示例，请选中this

单击按钮后的模态中断布局

1 个答案: