Last active
August 29, 2015 14:07
-
-
Save benceg/92025b19ed5aa9b448b3 to your computer and use it in GitHub Desktop.
Vanilla JavaScript & SCSS Modals
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<link rel="stylesheet" href="modal.css"> | |
</head> | |
<body> | |
<a href="#modal-content" rel="modal:open">Click Me</a> | |
<div id="modal-grab">I'm the modal content.</div> | |
<div id="modal"> | |
<a rel="modal:close" href="#">Close</a> | |
<div id="modal-content"></div> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function SimpleModal (userOptions) { | |
'use strict'; | |
var settings = { | |
'modal' : '#modal', | |
'modalContent' : '#modal-content', | |
'open' : '[rel="modal:open"]', | |
'close' : '[rel="modal:close"]', | |
'parent' : 'body', | |
'class' : 'modal' | |
}; | |
if (typeof userOptions === 'object') { | |
for (var i in userOptions) { | |
settings[i] = userOptions[i]; | |
} | |
} | |
var modal = document.querySelector(settings.modal); | |
var modalContent = modal.querySelector(settings.modalContent); | |
var open = document.querySelectorAll(settings.open); | |
var close = document.querySelectorAll(settings.close); | |
var parent = document.querySelector(settings.parent); | |
var href; | |
var openEvent = function (e) { | |
e.preventDefault(); | |
href = this.getAttribute('href'); | |
modalContent.innerHTML = document.querySelector(href).innerHTML; | |
parent.classList.add(settings.class); | |
}; | |
var closeEvent = function (e) { | |
e.preventDefault(); | |
modalContent.innerHTML = ''; | |
parent.classList.remove(settings.class); | |
}; | |
for (var i = 0; i < open.length; i++) { | |
(function (_i) { | |
open[_i].addEventListener('click', openEvent); | |
})(i); | |
} | |
for (var i = 0; i < close.length; i++) { | |
(function (_i) { | |
close[_i].addEventListener('click', closeEvent); | |
})(i); | |
} | |
} | |
simpleModal({ | |
// override options here | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, | |
body { | |
width: 100%; | |
height: 100%; | |
} | |
body { | |
&:after { | |
position: fixed; | |
content: ""; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
background: rgba(255,0,100,0.3); | |
z-index: -1; | |
opacity: 0; | |
transition: opacity 0.2s, z-index 0s 0.2s; | |
} | |
&.modal:after { | |
z-index: 1; | |
opacity: 1; | |
transition: opacity 0.2s; | |
} | |
} | |
#modal { | |
position: fixed; | |
left: 50%; | |
top: 50%; | |
width: 500px; | |
height: 500px; | |
margin: -250px 0 0 -250px; | |
background: #fff; | |
z-index: -1; | |
opacity: 0; | |
transform: scale(0); | |
transition: opacity 0.2s, transform 0.2s, z-index 0s 0.2s; | |
.modal & { | |
z-index: 2; | |
opacity: 1; | |
transform: scale(1); | |
transition: opacity 0.2s, transform 0.2s; | |
} | |
} | |
#modal-grab { | |
display: none; | |
} |
Works in IE10+.
Animations will not appear in IE < 10.
For < IE10:
- You'll need a
classList
shim. - Check out https://github.com/remy/polyfills/blob/master/classList.js
For < IE9
- You'll need an
addEventListener
shim. - I'm not going to find one for you if you're too lazy to look that up.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Invoked Using:
Removed Using: