Modalise.js

Modalise give you an easy, fast and efficient library to make CSS modals without worrying on the Javascript.

As you can see, I am not a webdesigner. Therefore the CSS given is only an example.

Usage

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Modal example</title>
    <link href="../../dist/modalise.css" rel="stylesheet">
    <script src="../../dist/modalise.js" type="text/javascript">
    </script>
    <script src="app.js" type="text/javascript">
    </script>
</head>
<body>
    <h1>Example modal 1</h1><button id="openModal">Show the modal</button>
    <div class="mdl mdl-fadein" id="exampleModal">
        <div class="mdl-content mdl-slidein">
            <center>
                <div class="mdl-header mdl-band-primary">
                    <span class="close">X</span>
                    <h2>Example modal</h2>
                </div>
                <div class="mdl-body">
                    <h3>Content modal</h3>
                </div>
                <div class="mdl-footer mdl-band-primary">
                    <button class="confirm" onclick="return false">Do
                    thing</button><button class="cancel" onclick=
                    "return false">Cancel the thing</button>
                </div>
            </center>
        </div>
    </div>
</body>
</html>

JS

var myModal = {}

window.onload = function(){
  // It is one of the button Modalise will attach the Show event.
  // Note that you can use Modalise without the events, by omitting the .attach() function.
  // Then, you can use show() or hide() to use it manually without overload. 
  var btnOpen = document.getElementById('openModal');
  
  // Modalise(id, options);
  myModal = new Modalise('exampleModal', {
      btnsOpen : [btnOpen]
    })
    .attach()
    .on('onShow', console.log)
    .on('onConfirm', console.log)
    .on('onHide', console.log);
}

API

For more informations, go to the API readme page.

Compile

npm install 
gulp js # build js & listen (browserify)
gulp jade # build html (examples)
gulp sass # build CSS
gulp # build all & watch changes

The output files are in the dist folder.

Examples :

bottom modal

bottom modal with pipe javascript

The image is irrelevant, as it is the same foreground as the bottom modal ;)

color palette

Contribute

Feel free to contribute. To do it, simply fork, make a branch with the name of the feature and create a pull request.

Credits

@AlexisTM (alexis[dot]paques[at]gmail[dot]com)

AlexisTM / modalise.js