a simple modal dialog written in pure javascript
JavaScript CSS Shell
Latest commit ccd92b1 Mar 29, 2014 @bmcmahen v0.1.1
Failed to load latest commit information.
example change default styles to allow scrolling on overflow Mar 29, 2014
standalone 0.1 Mar 29, 2014
.gitignore 0.1 Mar 29, 2014
History.md 0.1 Mar 29, 2014
Makefile 0.1 Mar 29, 2014
Readme.md 0.1 Mar 29, 2014
component.json v0.1.1 Mar 29, 2014
index.js 0.1 Mar 29, 2014
modal.css change default styles to allow scrolling on overflow Mar 29, 2014



A simple, bootstrap-like modal dialog written in pure Javascript.


$ component install bmcmahen/modal

or use the standalone version in the standalone directory, and attach the script and css to your HTML page.


To use the HTML api, you need to specifically call listen(). The data-modal-id attribute directs us to the id of the modal dialog markup. Use data-modal-close on a button within the modal to close it.

<a href='#' tabindex='-1' data-show-overlay='true' data-modal-id='myModal'>show modal</a>

<div id='myModal' class='modal fade' tabindex='-1' aria-labelledby='myModalLabel' role='dialog' aria-hidden='true'>
    <div class='modal-dialog'>
      <div class='modal-content'>
        <div class='modal-header'>
          <button type='button' class='close' data-modal-close='true' aria-hidden='true'>&times;</button>
          <h4 class='modal-title' id='myMOdalLabel'>Modal title</h4>
        <div class='modal-body'>
          <p> Lorem ipsum Do sit aute minim id et quis amet eiusmod cillum consectetur ad in nisi do sunt consectetur Duis minim deserunt ut et consequat sed ullamco in minim. </p>
        <div class='modal-footer'>
          <a href='#' data-modal-close='true'>hide modal</a>

Or you can use the Javascript API.

var modal = require('modal');
var myModal = modal(document.querySelector('#myModal'));

myModal.show(); // show the modal
myModal.hide(); // hide the modal

myModal.on('showing', function(){
  console.log('modal is in the process of showing..');