创建图片库

Question

我试图创建一个图片库的图像模式图像模式，但我没有看到结果，当点击图片，我不知道哪里是问题

我怎样才能修复它？哪里是我的错？我用这个 链接https://codepen.io/koolhaus/pen/ajwcE

我的代码是

<script> 
     $(document).on('ready', function(){ 
     $modal = $('.modal-frame'); 
     $overlay = $('.modal-overlay'); 
     $modal.bind('webkitAnimationEnd oanimationend msAnimationEnd 
    animationend', function(e){ 
     if($modal.hasClass('state-leave')) { 
     $modal.removeClass('state-leave'); 
    } 
    }); 

    $('.close').on('click', function(){ 
     $overlay.removeClass('state-show'); 
     $modal.removeClass('state-appear').addClass('state-leave'); 
    }); 

    $('.open').on('click', function(){ 
     $overlay.addClass('state-show'); 
     $modal.removeClass('state-leave').addClass('state-appear'); 
    }); 

    }); 
    $("button").click(function() { 
     $.ajax({ 
      method: 'GET', 
      url: './comment?media_id=' + this.id, 
      success: function (data) { 
       $("#comments").html(data); 
      } 
     }); 
    }); 
</script> 

<div id="comments"> 
    <div class="modal-frame"> 
    <div class="modal"> 
      </div> 
     </div> 

@foreach($array as $img) 

      <li style="margin:0 auto"> 
       <a class="fancy-btn open"> 
        <img src="{{$img['image']}}"> 
       </a> 
      </li> 
     </ul> 
    @endforeach 
</div> 

Answer 1

$(document).on('ready', function() { 
 
    $modal = $('.modal-frame'); 
 
    $overlay = $('.modal-overlay'); 
 
    $modal.bind('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { 
 
    if ($modal.hasClass('state-leave')) { 
 
     $modal.removeClass('state-leave'); 
 
    } 
 
    }); 
 

 
    $('.close').on('click', function() { 
 
    $overlay.removeClass('state-show'); 
 
    $modal.removeClass('state-appear').addClass('state-leave'); 
 
    }); 
 

 
    $('.open').on('click', function() { 
 

 
    $overlay.addClass('state-show'); 
 
    $modal.removeClass('state-leave').addClass('state-appear'); 
 
    }); 
 

 
});

* { 
 
    box-sizing: border-box; 
 
} 
 

 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: 'Noto Sans', sans-serif; 
 
    font-weight: 400; 
 
    font-size: 16px; 
 
    line-height: 22px; 
 
    background-color: #F2E1AC; 
 
} 
 

 
.fancy-btn { 
 
    -webkit-appearance: none; 
 
    cursor: pointer; 
 
    outline: none; 
 
    border: none; 
 
    position: relative; 
 
    top: 50%; 
 
    display: block; 
 
    min-width: 10%; 
 
    line-height: 55px; 
 
    font-size: 14px; 
 
    text-transform: uppercase; 
 
    margin: 0 auto; 
 
    padding: 0 10px; 
 
    background-color: #F2594B; 
 
    color: #FFF; 
 
    border-radius: 3px; 
 
    -moz-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    -webkit-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
} 
 

 
.fancy-btn:hover { 
 
    background-color: #f46f63; 
 
} 
 

 
.modal-overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    background-color: #fff; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    z-index: 40; 
 
    -moz-transition: opacity 0.25s ease 0s, visibility 0.35s linear; 
 
    -o-transition: opacity 0.25s ease 0s, visibility 0.35s linear; 
 
    -webkit-transition: opacity 0.25s ease, visibility 0.35s linear; 
 
    -webkit-transition-delay: 0s, 0s; 
 
    transition: opacity 0.25s ease 0s, visibility 0.35s linear; 
 
} 
 

 
.modal-overlay.state-show { 
 
    opacity: .7; 
 
    visibility: visible; 
 
    -moz-transition-delay: 0s; 
 
    -o-transition-delay: 0s; 
 
    -webkit-transition-delay: 0s; 
 
    transition-delay: 0s; 
 
    -moz-transition-duration: 0.2s, 0s; 
 
    -o-transition-duration: 0.2s, 0s; 
 
    -webkit-transition-duration: 0.2s, 0s; 
 
    transition-duration: 0.2s, 0s; 
 
} 
 

 
.modal-frame { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    z-index: 50; 
 
    /*  display: table; */ 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
    -moz-box-align: center; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    -moz-box-pack: center; 
 
    -ms-flex-pack: center; 
 
    width: 100%; 
 
    text-align: center; 
 
    visibility: hidden; 
 
} 
 

 
.modal-frame.state-appear { 
 
    visibility: visible; 
 
} 
 

 
.modal-frame.state-appear .modal-inset { 
 
    -moz-animation: modalComeIn 0.25s ease; 
 
    -webkit-animation: modalComeIn 0.25s ease; 
 
    animation: modalComeIn 0.25s ease; 
 
    visibility: visible; 
 
    /* to keep @ final state */ 
 
} 
 

 
.modal-frame.state-appear .modal-body { 
 
    opacity: 1; 
 
    -moz-transform: translateY(0) scale(1, 1); 
 
    -ms-transform: translateY(0) scale(1, 1); 
 
    -webkit-transform: translateY(0) scale(1, 1); 
 
    transform: translateY(0) scale(1, 1); 
 
} 
 

 
.modal-frame.state-leave { 
 
    visibility: visible; 
 
} 
 

 
.modal-frame.state-leave .modal-inset { 
 
    -moz-animation: modalHeadOut 0.35s ease 0.1s; 
 
    -webkit-animation: modalHeadOut 0.35s ease 0.1s; 
 
    animation: modalHeadOut 0.35s ease 0.1s; 
 
    visibility: visible; 
 
} 
 

 
.modal-frame.state-leave .modal-body { 
 
    opacity: 0; 
 
    -moz-transition-delay: 0s; 
 
    -o-transition-delay: 0s; 
 
    -webkit-transition-delay: 0s; 
 
    transition-delay: 0s; 
 
    -moz-transition-duration: 0.35s; 
 
    -o-transition-duration: 0.35s; 
 
    -webkit-transition-duration: 0.35s; 
 
    transition-duration: 0.35s; 
 
    -moz-transition-timing-function: ease; 
 
    -o-transition-timing-function: ease; 
 
    -webkit-transition-timing-function: ease; 
 
    transition-timing-function: ease; 
 
    -moz-transform: translateY(25px); 
 
    -ms-transform: translateY(25px); 
 
    -webkit-transform: translateY(25px); 
 
    transform: translateY(25px); 
 
} 
 

 
@-moz-document url-prefix() { 
 
    .modal-frame { 
 
    height: calc(100% - 55px); 
 
    } 
 
} 
 

 
.modal { 
 
    display: block; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
.modal-inset { 
 
    position: relative; 
 
    padding: 60px; 
 
    background-color: white; 
 
    min-width: 320px; 
 
    min-height: 126px; 
 
    margin: auto; 
 
    visibility: hidden; 
 
    -moz-box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2); 
 
    -webkit-box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2); 
 
    box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2); 
 
    -moz-backface-visibility: hidden; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -moz-transform: translate3d(0, 0, 0); 
 
    -ms-transform: translate3d(0, 0, 0); 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    -moz-transform-style: preserve-3d; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.modal-inset .close { 
 
    display: block; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 10px; 
 
    padding: 10px; 
 
    opacity: .4; 
 
} 
 

 
.modal-inset .close:hover { 
 
    opacity: 1; 
 
} 
 

 
.modal-body { 
 
    margin: auto; 
 
    opacity: 0; 
 
    -moz-transform: translateY(0) scale(0.8, 0.8); 
 
    -ms-transform: translateY(0) scale(0.8, 0.8); 
 
    -webkit-transform: translateY(0) scale(0.8, 0.8); 
 
    transform: translateY(0) scale(0.8, 0.8); 
 
    -moz-transition-property: opacity, -moz-transform; 
 
    -o-transition-property: opacity, -o-transform; 
 
    -webkit-transition-property: opacity, -webkit-transform; 
 
    transition-property: opacity, transform; 
 
    -moz-transition-duration: 0.25s; 
 
    -o-transition-duration: 0.25s; 
 
    -webkit-transition-duration: 0.25s; 
 
    transition-duration: 0.25s; 
 
    -moz-transition-delay: 0.1s; 
 
    -o-transition-delay: 0.1s; 
 
    -webkit-transition-delay: 0.1s; 
 
    transition-delay: 0.1s; 
 
} 
 

 
.modal-body h3 { 
 
    font-weight: 700; 
 
    padding-bottom: 22px; 
 
    display: block; 
 
    color: #F2594B; 
 
    text-align: center; 
 
} 
 

 
.modal-body p { 
 
    padding-bottom: 20px; 
 
} 
 

 
.modal-body .ps { 
 
    font-size: 12px; 
 
    opacity: .3; 
 
} 
 

 
@-webkit-keyframes modalComeIn { 
 
    0% { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    -moz-transform: scale(0.8, 0.8); 
 
    -ms-transform: scale(0.8, 0.8); 
 
    -webkit-transform: scale(0.8, 0.8); 
 
    transform: scale(0.8, 0.8); 
 
    } 
 
    65.5% { 
 
    -moz-transform: scale(1.03, 1.03); 
 
    -ms-transform: scale(1.03, 1.03); 
 
    -webkit-transform: scale(1.03, 1.03); 
 
    transform: scale(1.03, 1.03); 
 
    } 
 
    100% { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    -moz-transform: scale(1, 1); 
 
    -ms-transform: scale(1, 1); 
 
    -webkit-transform: scale(1, 1); 
 
    transform: scale(1, 1); 
 
    } 
 
} 
 

 
@-moz-keyframes modalComeIn { 
 
    0% { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    -moz-transform: scale(0.8, 0.8); 
 
    -ms-transform: scale(0.8, 0.8); 
 
    -webkit-transform: scale(0.8, 0.8); 
 
    transform: scale(0.8, 0.8); 
 
    } 
 
    65.5% { 
 
    -moz-transform: scale(1.03, 1.03); 
 
    -ms-transform: scale(1.03, 1.03); 
 
    -webkit-transform: scale(1.03, 1.03); 
 
    transform: scale(1.03, 1.03); 
 
    } 
 
    100% { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    -moz-transform: scale(1, 1); 
 
    -ms-transform: scale(1, 1); 
 
    -webkit-transform: scale(1, 1); 
 
    transform: scale(1, 1); 
 
    } 
 
} 
 

 
@keyframes modalComeIn { 
 
    0% { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    -moz-transform: scale(0.8, 0.8); 
 
    -ms-transform: scale(0.8, 0.8); 
 
    -webkit-transform: scale(0.8, 0.8); 
 
    transform: scale(0.8, 0.8); 
 
    } 
 
    65.5% { 
 
    -moz-transform: scale(1.03, 1.03); 
 
    -ms-transform: scale(1.03, 1.03); 
 
    -webkit-transform: scale(1.03, 1.03); 
 
    transform: scale(1.03, 1.03); 
 
    } 
 
    100% { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    -moz-transform: scale(1, 1); 
 
    -ms-transform: scale(1, 1); 
 
    -webkit-transform: scale(1, 1); 
 
    transform: scale(1, 1); 
 
    } 
 
} 
 

 
@-webkit-keyframes modalHeadOut { 
 
    0% { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    -moz-transform: translateY(0) scale(1, 1); 
 
    -ms-transform: translateY(0) scale(1, 1); 
 
    -webkit-transform: translateY(0) scale(1, 1); 
 
    transform: translateY(0) scale(1, 1); 
 
    } 
 
    100% { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    -moz-transform: translateY(35px) scale(0.97, 0.97); 
 
    -ms-transform: translateY(35px) scale(0.97, 0.97); 
 
    -webkit-transform: translateY(35px) scale(0.97, 0.97); 
 
    transform: translateY(35px) scale(0.97, 0.97); 
 
    } 
 
} 
 

 
@-moz-keyframes modalHeadOut { 
 
    0% { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    -moz-transform: translateY(0) scale(1, 1); 
 
    -ms-transform: translateY(0) scale(1, 1); 
 
    -webkit-transform: translateY(0) scale(1, 1); 
 
    transform: translateY(0) scale(1, 1); 
 
    } 
 
    100% { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    -moz-transform: translateY(35px) scale(0.97, 0.97); 
 
    -ms-transform: translateY(35px) scale(0.97, 0.97); 
 
    -webkit-transform: translateY(35px) scale(0.97, 0.97); 
 
    transform: translateY(35px) scale(0.97, 0.97); 
 
    } 
 
} 
 

 
@keyframes modalHeadOut { 
 
    0% { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    -moz-transform: translateY(0) scale(1, 1); 
 
    -ms-transform: translateY(0) scale(1, 1); 
 
    -webkit-transform: translateY(0) scale(1, 1); 
 
    transform: translateY(0) scale(1, 1); 
 
    } 
 
    100% { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    -moz-transform: translateY(35px) scale(0.97, 0.97); 
 
    -ms-transform: translateY(35px) scale(0.97, 0.97); 
 
    -webkit-transform: translateY(35px) scale(0.97, 0.97); 
 
    transform: translateY(35px) scale(0.97, 0.97); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<div class="modal-frame"> 
 
    <div class="modal"> 
 
    <div class="modal-inset"> 
 
     <div class="button close"><i class="fa fa-close"></i></div> 
 

 
     <div class="modal-body"> 
 
     <h3>Hello header</h3> 
 
     <p>body here......</p> 
 
     <p class="ps">ps!!!</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="modal-overlay"></div> 
 

 
<div id="comments"> 
 

 

 
    <li style="margin:0 auto"> 
 
    <a width="100" height="100" class="fancy-btn open"> <img alt="Image Here" /> 
 

 
    </a> 
 
    </li> 
 

 
</div>