Modals
Figuring out why modal retains memory of prior modals.
HTML
<link rel="stylesheet" href="http://dixso.github.io/custombox/dist/custombox.min.css">
<script src="http://dixso.github.io/custombox/dist/custombox.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Minimalist-jQuery-Image-Gallery-with-Thumbnails/src/simplegallery.min.js"></script>
<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
<link rel="stylesheet" href="http://mynameismatthieu.com/WOW/css/libs/animate.css">
<script src="http://scripts.gayadesign.com/queryLoader2/queryloader2.js"></script>
<!-- MODAL TRIGGERS --->
<section id="pageContainer">
<div id="contentContainer">
<div class="modalTrigger wow flipInY" data-wow-delay="0s">MODAL A TRIGGER
<div class="info" data-href="#modalA">open modal A</div>
</div>
<!---->
<div class="modalTrigger wow flipInX" data-wow-delay="0s">MODAL B TRIGGER
<div class="info" data-href="#modalB">open modal B</div>
</div>
<!---->
<div class="modalTrigger wow flipInY" data-wow-delay="0s">MODAL C TRIGGER
<div class="info" data-href="#modalC">open modal C</div>
</div>
</div>
</section>
<!-- MODALS -->
<div id="modalA" class="modal">
<div id="modalClose" class="close"><span>X</span>
</div>
<div class="modalTitle wow fadeInLeft" data-wow-delay=".5s" data-wow-duration=".3s">MODAL A
</div>
<div class="modalBodyContainer">
<div class="modalMainImage wow rotateIn" data-wow-delay=".3s" data-wow-duration=".3s">
<div id="gallery" class="">
<div class="content">
<img src="http://thumb7.shutterstock.com/display_pic_with_logo/1364314/292146305/stock-vector-paper-size-a-standard-icon-file-document-symbol-icon-on-blurred-background-vector-292146305.jpg" class="image_1">
<img src="http://thumb7.shutterstock.com/display_pic_with_logo/1364314/291360161/stock-vector-paper-size-a-standard-icon-file-document-symbol-icon-on-blurred-background-vector-291360161.jpg" class="image_2"...
CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
body {text-align: center; font-family: 'open sans'; position:relative; margin:0; padding:0; background-color:#2c3e50;}
#pageContainer {width:100%; margin:0 auto; text-align:center; padding:50px 0 50px 0;}
#contentContainer {width:80%; margin:0 auto; min-height:440px;}
.modalTrigger {display:inline-block; opacity:1; border-radius:20px; border:1px solid #CCC; width:100px; height:100px; vertical-align:middle; padding:20px; margin:1.6%; background-color:rgba(255,255,255,.2); font-size:12px;}
.info {display:inline-block; text-decoration:none; padding:7px 14px; color:#2c3e50; text-transform:uppercase; border:1px solid #2c3e50; box-sizing:border-box; font-size:12px; margin-top:10px;}
.info:hover {cursor:pointer; background-color:#2c3e50; color:#EBEBEB; border:1px solid #2c3e50; box-sizing:border-box;}
.modal {display:none; background-color:#333; width:70vw; height:90vh; padding:30px 40px; box-sizing:border-box; border-radius:20px; background-image:url(../../textures/az-subtle.png); position:relative}
.close {margin-right:10px;}
.close:hover {color:#F00;}
#modalClose {display:block; width:30px; height:30px; border-radius:15px; position:absolute; top:15px; right:10px; z-index:200; cursor:pointer; margin:4px 10px 0 0; background-color:#CCC; vertical-align:middle; line-height:30px;}
.modalTitle {padding:5px 0; text-align:left; font-size:24px; text-transform:uppercase; color:#EBEBEB; line-height:30px; vertical-align:middle;}
.modalBodyContainer {width:100%; font-size:0px; padding:20px 0; text-align:center;}
.modalMainImage {width:58%; display:inline-block;padding:0px 4% 0 0; vertical-align:top; text-align:center;}
.modalMainImage img {max-width:300px; max-height:300px; box-shadow:0px 8px 17px 0px rgba(0, 0, 0, 0.4); background-color:#EBEBEB;}
.modalBody {width:38%; display:inline-block; padding:0px 0; color:#EBEBEB; font-size:14px; text-align:center; line-height:18px;...
JavaScript
//CUSTOM BOX
$(document).ready(function () {
$(".modal").each(function () {
window['reset' + $(this).attr('id')] = $(this).find('.content').html();
});
$(".modal img").not(":visible").each(function () {
$(this).data("src", this.src);
this.src = "";
});
$(".modal").each(function () {
$(this).data("sourcesAreSet", false);
});
$('.info').on('click', function (e) {
var correspondingModal = $($(this).data('href'));
if (correspondingModal.data("sourcesAreSet") == false) {
correspondingModal.find("img").each(function () {
this.src = $(this).data("src");
});
correspondingModal.data("sourcesAreSet", true);
}
Custombox.open({
target: $(this).data('href'),
effect: 'push',
speed: 500,
overlayColor: '#2C3E50',
close: function(){
$(".modal").each(function () {
$(this).find('.content').html(window['reset' + $(this).attr('id')]);
});
},
open: function(){
$(".modal").each(function () {
$(this).find('.content').html(window['reset' + $(this).attr('id')]);
});
}
});
e.preventDefault();
});
});
//MODAL CLOSE
$(document).ready(function () {
$('.close').click(function(){
Custombox.close();
});
});
//SIMPLE THUMB GALLERY
$(document).ready(function(){
$('#gallery').simplegallery({
galltime : 1000, // transition delay
gallcontent: '.content',
gallthumbnail: '.thumbnail',
gallthumb: '.thumb',
});
});
//WOW ANIMATE
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
}
)
//wow.init();
//PRELOADER
<!-- PRELOADER -->
$(document).ready(function ()...