Skip to content

Commit

Permalink
add support for navigation to next/previous modals joaopereirawd#63
Browse files Browse the repository at this point in the history 
also I add support to close modal with Escape key joaopereirawd#60
  • Loading branch information
Martin Gonzalez Robles committed Sep 6, 2018
1 parent 50f7a03 commit cfbe5ae
Show file tree
Hide file tree
Showing 3 changed files with 177 additions and 117 deletions.
177 changes: 106 additions & 71 deletions demo/demos.html
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,119 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>DEMOS</title>
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<style>
#btn-close-modal {
width:100%;
text-align: center;
cursor:pointer;
color:#fff;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>DEMOS</title>
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<style>
.btn-modal{
width:100%;
text-align: center;
cursor:pointer;
color:#fff;
}

</style>
</head>
<body>

</style>
</head>
<body>
<!--Call your modal-->
<ul>
<li><a id="demo01" href="#animatedModal">DEMO01</a></li>
<li><a id="demo02" href="#modal-02">DEMO02</a></li>
<li><a id="demo03" href="#modal-03">DEMO03</a></li>
</ul>

<!--Call your modal-->
<ul>
<li><a id="demo01" href="#animatedModal">DEMO01</a></li>
<li><a id="demo02" href="#modal-02">DEMO02</a></li>
</ul>


<!--DEMO01-->
<div id="animatedModal">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal">
CLOSE MODAL
</div>

<div class="modal-content">
<!--Your modal content goes here-->
</div>
<!--DEMO01-->
<div id="animatedModal">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div class="close-animatedModal btn-modal btn-close-modal">
CLOSE MODAL
</div>
<!--THIS IS IMPORTANT! to navigate to the next modal, the class name has to match the name given on the ID -->
<div class="next-animatedModal btn-modal btn-next-modal">
NEXT MODAL
</div>
<div class="modal-content">
<!--Your modal content goes here-->
</div>
</div>

<!--DEMO02-->
<div id="modal-02">
<!--"THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID-->
<div id="btn-close-modal" class="close-modal-02">
CLOSE MODAL
</div>

<div class="modal-content">
<!--Your modal content goes here-->
</div>
<!--DEMO02-->
<div id="modal-02">
<!--"THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID-->
<div class="close-modal-02 btn-modal btn-close-modal">
CLOSE MODAL
</div>
<!--THIS IS IMPORTANT! to navigate to the previous modal, the class name has to match the name given on the ID -->
<div class="previous-modal-02 btn-modal btn-previous-modal">
PREVIOUS MODAL
</div>
<!--THIS IS IMPORTANT! to navigate to the next modal, the class name has to match the name given on the ID -->
<div class="next-modal-02 btn-modal btn-next-modal">
NEXT MODAL
</div>
<div class="modal-content">
<!--Your modal content goes here-->
</div>
</div>

<!--DEMO03-->
<div id="modal-03">
<!--"THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID-->
<div class="close-modal-03 btn-modal btn-close-modal">
CLOSE MODAL
</div>
<!--THIS IS IMPORTANT! to navigate to the previous modal, the class name has to match the name given on the ID -->
<div class="previous-modal-03 btn-modal btn-previous-modal">
PREVIOUS MODAL
</div>
<div class="modal-content">
<!--Your modal content goes here-->
</div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/animatedModal.min.js"></script>
<script>
<script src="js/jquery.min.js"></script>
<script src="js/animatedModal.min.js"></script>
<script>
//demo 01
$("#demo01").animatedModal({
next: '#demo02',
});

//demo 01
$("#demo01").animatedModal();
//demo 02
$("#demo02").animatedModal({
modalTarget:'modal-02',
animatedIn:'bounceInDown',
animatedOut:'bounceOutDown',
color:'#3498db',
previous: '#demo01',
next: '#demo03',
// Callbacks
beforeOpen: function() {
console.log("The animation was called");
},
afterOpen: function() {
console.log("The animation is completed");
},
beforeClose: function() {
console.log("The animation was called");
},
afterClose: function() {
console.log("The animation is completed");
}
});

//demo 02
$("#demo02").animatedModal({
modalTarget:'modal-02',
animatedIn:'lightSpeedIn',
animatedOut:'bounceOutDown',
color:'#3498db',
// Callbacks
beforeOpen: function() {
console.log("The animation was called");
},
afterOpen: function() {
console.log("The animation is completed");
},
beforeClose: function() {
console.log("The animation was called");
},
afterClose: function() {
console.log("The animation is completed");
}
});
$("#demo03").animatedModal({
modalTarget:'modal-03',
color:'#ff6a00',
animatedIn:'bounceInDown',
animatedOut:'bounceOutDown',
previous: '#demo02',
});

</script>
</script>

</body>
</body>
</html>
115 changes: 70 additions & 45 deletions demo/js/animatedModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,40 +7,54 @@
=========================================*/

(function ($) {

$.fn.animatedModal = function(options) {
var modal = $(this);

//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
position:'fixed',
width:'100%',
height:'100%',
top:'0px',
left:'0px',
zIndexIn: '9999',
zIndexOut: '-9999',
color: '#39BEB9',
opacityIn:'1',
opacityOut:'0',
modalTarget:'animatedModal',
position:'fixed',
width:'100%',
height:'100%',
top:'0px',
left:'0px',
zIndexIn: '9999',
zIndexOut: '-9999',
color: '#39BEB9',
opacityIn:'1',
opacityOut:'0',
animatedIn:'zoomIn',
animatedOut:'zoomOut',
animationDuration:'.6s',
overflow:'auto',
animationDuration:'.6s',
overflow:'auto',
// Callbacks
beforeOpen: function() {},
afterOpen: function() {},
beforeClose: function() {},
afterClose: function() {}


beforeOpen: function() {},
afterOpen: function() {},
beforeClose: function() {},
afterClose: function() {},
close: function(event) {
event.preventDefault();
$('body, html').css({'overflow':'auto'});

settings.beforeClose(); //beforeClose
if (id.hasClass(settings.modalTarget+'-on')) {
id.removeClass(settings.modalTarget+'-on');
id.addClass(settings.modalTarget+'-off');
}

if (id.hasClass(settings.modalTarget+'-off')) {
id.removeClass(settings.animatedIn);
id.addClass(settings.animatedOut);
id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose);
};
}

}, options);

var closeBt = $('.close-'+settings.modalTarget);

//console.log(closeBt)
var closeBt = $('.close-'+settings.modalTarget);
var nextBt = $('.next-'+settings.modalTarget);
var previousBt = $('.previous-'+settings.modalTarget);

var href = $(modal).attr('href'),
id = $('body').find('#'+settings.modalTarget),
Expand All @@ -66,54 +80,65 @@
//Apply stles
id.css(initStyles);

modal.click(function(event) {
modal.click(function(event) {
event.preventDefault();
$('body, html').css({'overflow':'hidden'});
if (href == idConc) {
if (id.hasClass(settings.modalTarget+'-off')) {
id.removeClass(settings.animatedOut);
id.removeClass(settings.modalTarget+'-off');
id.addClass(settings.modalTarget+'-on');
}
}

if (id.hasClass(settings.modalTarget+'-on')) {
if (id.hasClass(settings.modalTarget+'-on')) {
settings.beforeOpen();
id.css({'opacity':settings.opacityIn,'z-index':settings.zIndexIn});
id.addClass(settings.animatedIn);
id.addClass(settings.animatedIn);
id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterOpen);
};
}
};
}
});



closeBt.click(function(event) {
event.preventDefault();
$('body, html').css({'overflow':'auto'});

settings.beforeClose(); //beforeClose
if (id.hasClass(settings.modalTarget+'-on')) {
id.removeClass(settings.modalTarget+'-on');
id.addClass(settings.modalTarget+'-off');
}
settings.close(event);
});

if (id.hasClass(settings.modalTarget+'-off')) {
id.removeClass(settings.animatedIn);
id.addClass(settings.animatedOut);
id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose);
};
nextBt.click(function(event) {
settings.close(event);
$(settings.next).click();
});

previousBt.click(function(event) {
settings.close(event);
$(settings.previous).click();
});

function afterClose () {
function afterClose () {
id.css({'z-index':settings.zIndexOut});
settings.afterClose(); //afterClose
}

function afterOpen () {
function afterOpen () {
settings.afterOpen(); //afterOpen
}

function afterNext () {
settings.afterNext(); //afterOpen
}

function afterPrevious () {
settings.afterPrevious(); //afterOpen
}

// close modal menu if esc key is used
jQuery(document).keyup(function(event){
if(event.keyCode == 27) {
settings.close(event);
}
});

}; // End animatedModal.js

}(jQuery));
Expand Down
2 changes: 1 addition & 1 deletion demo/js/animatedModal.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit cfbe5ae

Please sign in to comment.