Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add support for navigation to next/previous modals #63 #1

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

add support for navigation to next/previous modals #63 #1

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cfbe5ae
add support for navigation to next/previous modals #63
Sep 6, 2018
3033eb5
replace jQuery with $ #63
Sep 12, 2018
695fada
I included spaces from previous commits #63
Sep 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 106 additions & 71 deletions demo/demos.html
View file
Open in desktop
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>
jansete marked this conversation as resolved.
Show resolved Hide resolved
<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
Open in desktop
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){
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

podemos usar $ no?, en la línea de abajo un espacio después del if

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
Open in desktop

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