Author: | ramonvictor |
---|---|
Views Total: | 3,447 views |
Official Page: | Go to website |
Last Update: | March 22, 2015 |
License: | MIT |
Preview:

Description:
rv-vanilla-modal is a small, responsive modal module made with CSS/CSS3 and vanilla JavaScript.
How to use it:
Load the rv-vanilla-modal.js
script in your web page.
<script src="js/rv-vanilla-modal.js"></script>
Create a button to toggle the modal.
<button data-rv-vanilla-modal="#targer-modal">Show modal</button>
Create the main content for the modal. Make sure the ID match the data-rv-vanilla-modal
attribute.
<div id="target-modal" class="rv-vanilla-modal"> <div class="rv-vanilla-modal-header group"> <button class="rv-vanilla-modal-close"><span class="text">×</span></button> <h2 class="rv-vanilla-modal-title">Modal Title</h2> </div> <div class="rv-vanilla-modal-body"> <p>Modal Content</p> </div> </div>
Enable the modal.
document.addEventListener('DOMContentLoaded', function() { /* global RvVanillaModal */ 'use strict'; var modal = new RvVanillaModal({ showOverlay: true }); // each method modal.each(function(element) { var target = element.getAttribute('data-rv-vanilla-modal'); var targetElement = document.querySelector(target); var closeBtn = targetElement.querySelector(modal.settings.closeSelector); // close click listerner closeBtn.addEventListener('click', function(event) { event.preventDefault(); modal.close(targetElement); }); // open click listerner element.addEventListener('click', function(event) { event.preventDefault(); modal.open(targetElement); }); }); }, false);
The sample CSS to style the modal.
.rv-vanilla-modal { position: absolute; top: -100%; left: 50%; width: 45%; min-height: 300px; margin: -300px 0 0 -22.5%; background: #fff; z-index: 10; -webkit-transition: .3s all ease-out; transition: .3s all ease-out; border-radius: 4px; -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,.3); box-shadow: 0 0 6px 0 rgba(0,0,0,.3) } .rv-vanilla-modal-is-open { top: 50% } .rv-vanilla-modal-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.5); opacity: 0; display: none; -webkit-transition: .4s opacity linear; transition: .4s opacity linear } .rv-vanilla-modal-overlay.is-shown { opacity: 1; display: block } .rv-vanilla-modal-header { padding: 20px; background: #3CB3E7; border-radius: 4px 4px 0 0 } .rv-vanilla-modal-body { padding: 25px 20px 20px; overflow: auto; color: #555 } .rv-vanilla-modal-body p { line-height: 150%; margin: 0 0 1em } .rv-vanilla-modal-title { color: #fff; margin: 0; font-size: 18px; font-weight: 300 } .rv-vanilla-modal-close { color: #1a9dd6; font-size: 16px; float: right; display: inline-block; width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.4); -webkit-transition: all .2s linear; transition: all .2s linear } .rv-vanilla-modal-close .text { position: relative; top: -1px } .rv-vanilla-modal-close:hover { color: #1996cd; background: rgba(255,255,255,.5) } .hidden { display: none!important; visibility: hidden } .group:after, .group:before { content: ""; display: table } .group:after { clear: both } .centered { text-align: center }
How can I open it at click position?