Skip to content

Instantly share code, notes, and snippets.

@dbarjs

dbarjs/modal.html

Created July 5, 2016 19:34
Show Gist options
  • Save dbarjs/b5ac8c0f599c35de2e7249d75299f698 to your computer and use it in GitHub Desktop.
Save dbarjs/b5ac8c0f599c35de2e7249d75299f698 to your computer and use it in GitHub Desktop.
Download ZIP
Mowe Modal
Raw
modal.html
<!DOCTYPE html>
<html lang="">
<meta charset="UTF-8">
<title></title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<script src="dist/js/villa.min.js"></script>
<link rel="stylesheet" href="dist/css/villa.min.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="dist/css/material-colors.css"/>
<link rel="stylesheet" type="text/css" href="dist/css/villa-cross.min.css"/>
<script src="dist/js/html5shiv.js"></script>
<script src="dist/js/html5shiv-printshiv.js"></script>
<script src="dist/js/classList.min.js"></script>
<![endif]-->
<style>
.ModalButton {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 600px;
height: 80px;
border: none;
}
.ModalButton span {
display: block;
}
</style>
<body>
<div class="Modal" id="lula"></div>
<button id="modal1" class="ModalButton" data-toggle="modal" data-target="foo">Button</button>
<button id="modal2" class="ModalButton" data-toggle="modal" data-target="foo">Button</button>
<button id="modal3" class="ModalButton" data-toggle="modal" data-target="foo">Button</button>
<button id="modal4" class="ModalButton" data-toggle="modal" data-target="foo">Button</button>
<button id="modal5" class="ModalButton" data-toggle="modal" data-target="foo">
<span class="red">Button</span>
</button>
<a href="#" id="modal6" class="ModalButton" aria-label="Button" data-toggle="modal" data-target="foo">
<span class="red">Button</span>
</a>
<script>
// var listeners = document.querySelectorAll('.ModalButton');
// for (var i = listeners.length; i--; )
// listeners[i].addEventListener('click', function () {
//
// console.log('abrindo o modal que não existe');
// console.log(this);
//
// });
function modalButtonOnClick(event) {
try {
if (event.target.dataset.toggle == 'modal')
console.log(event.target.dataset.target);
} catch (e) { }
}
try {
window.addEventListener('click', modalButtonOnClick);
} catch (e) {
window.attachEvent('onclick', modalButtonOnClick);
}
setTimeout(function () {
var button = document.createElement('button');
button.id = 'modal7';
button.className = 'ModalButton';
button.innerText = 'Button';
button.dataset.toggle = 'modal';
button.dataset.target = 'modal';
document.body.appendChild(button);
}, 1500);
setTimeout(function () {
var modal = Modal.getModalByID('lula');
console.log(modal);
modal.show();
}, 3000);
</script>
<script>
/* Modal */
var Modal = (function () {
/**
* Modal constructor
* @constructor
*/
function Modal(element) {
this.element = element;
if (this.element)
this.init();
}
Modal.prototype.show = function () {
console.log('mostrando tudo, uhull!');
};
Modal.prototype.init = function () {
console.log('iniciando, ebaaah!');
};
Modal.getModalByID = function (modal) {
var modalElement = document.getElementById(modal);
if (modalElement.modal)
return modalElement.modal;
};
return Modal;
})();
var modal = document.querySelectorAll('.Modal');
for (var i = modal.length; i--; )
modal[i].modal = new Modal(modal[i]);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment