sv-modal-js is a vanilla JavaScript plugin for displaying modal dialogs. It can be used for alerts, lightboxes and more. See demo/example.html
for a demo. Styling is provided in the Sass file, or grab the compiled CSS from the demo folder.
Pass in an ID to use for the modal, then in your click handler add your desired content using the inject
method and show
the modal. Example:
<button id="modalLink">Show a modal window</button>
<script src="sv-modal.js"></script>
<script>
// set up the modal
var modal = new SV.Modal('my-modal');
// trigger the modal
document.getElementById('modalLink').addEventListener('click', function(ev) {
ev.preventDefault();
// inject some content
var html = '<p>Here are some random numbers.</p>';
for ( var i = 0; i < 10; i++ )
html += Math.random() + '<br>';
modal.inject(html, 'Hello, world!');
modal.show();
});
</script>
The object returned from new SV.Modal()
has the following methods:
inject(content, title)
- add content to the modal and set the title.show()
- show the modal.close()
- manually hide the modal. Triggers the sv.modal.close
event (see below).getModalElement()
- get the DOM element containing the modal.getContentElement()
- get the DOM element containing the modal's content.getTitleElement()
- get the DOM element containing the modal's title.resizeContent(width, height)
- manually resize the modal to a specific (pixel) size. Triggers the sv.modal.resize
event (see below).The second argument to the constructor is an object of options. There's currently one option:
cssAnimTime
- this should be set to the same time that the CSS transitions last for, in milliseconds. Defaults to 400
.Note that this does not change the actual length of the transitions - those are specified in CSS - it is only used to delay the firing of the events. The reason for this is that hooking into transition events with JS is unreliable and suffers from race conditions.
There are also two events you can hook into. For reasons described above they are fired after a short delay (default 400ms), which is after the CSS transitions should have ended.
sv.modal.close
is fired after the modal has fully closed (faded out). As the plugin creates the modal element itself you'll need to get it first with getModalElement()
then attach the listener. Example:
modal.getModalElement().addEventListener('sv.modal.close', function (ev) {
console.log('Closed the modal');
});
sv.modal.resize
is fired after a call to resizeContent
, when the animation has finished. An example use case would be for an image lightbox, where we get the image's width/height and resize the modal to fit:
var img = new Image();
img.addEventListener('load', function() {
modal.resizeContent(img.width, img.height);
});
modal.getModalElement().addEventListener('sv.modal.resize', function (ev) {
modal.inject(img, 'Image title');
});
// trigger load event, which in turn triggers resize event
img.src = 'example.jpg';