javascript - Create Image modal for image gallery -
i'm trying create image modal image gallery,but don't see result when click on image,i don't know problem
how can fixed it?where wrong?i used link https://codepen.io/koolhaus/pen/ajwce
my code is
<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 $img) <li style="margin:0 auto"> <a class="fancy-btn open"> <img src="{{$img['image']}}"> </a> </li> </ul> @endforeach </div>
$(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; /* 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>
Comments
Post a Comment