A simple modal to be triggered using a session variable
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.versions
README.md
package.js
screenshot.png
simple-modal.css
simple-modal.html
simple-modal.js
versions.json

README.md

Simple Modal

This package adds a simple modal menu, which can be shown using a Session variable.

Alt text

Usage

To use the modal with a Session trigger simply add the modal somewhere in your template:

{{#simpleModal trigger="mySessionVariableName" class="some-custom-class"}}
    // html content
{{/simpleModal}}

If you don't pass a trigger variable the modal will be shown at all times.

Then you just need to add an action, e.g. a button click to set the Session variable to true or false and the modal will fade in or out:

Template.myTemplate.events({
    'click button.show-modal': function(){
        if(Session.equals('mySessionVariableName', true))
            Session.set('mySessionVariableName', false);
        else
            Session.set('mySessionVariableName', true);
    }
});

Using with frozeman:template-var

You can also use the simple modal and trigger it via a template specific template-var. Just pass template-var=true and it will react to a template var of the template where the {{#simpleModal}} helper is in:

{{#simpleModal trigger="myTemplateVariableName" template-var=true}}
    // html content
{{/simpleModal}}

And trigger it like

Template.myTemplate.events({
    'click button.show-modal': function(){
        if(TemplateVar.get('myTemplateVariableName', true))
            TemplateVar.set('myTemplateVariableName', false);
        else
            TemplateVar.set('myTemplateVariableName', true);
    }
});

Styling

The default styles are simply:

div.simple-modal {
    position: absolute;
    max-width: 200px;
    background-color: #fff;

    /* ANIMATION */
    -webkit-transition-property: opacity transform;
    -moz-transition-property: opacity transform;
    -o-transition-property: opacity transform;
    transition-property: opacity transform;
    -webkit-transition-duration: 200ms;
    -moz-transition-duration: 200ms;
    -o-transition-duration: 200ms;
    transition-duration: 200ms;
}
div.simple-modal ul {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}
div.simple-modal li {
    display: block;
}

div.simple-modal.animate {
    zoom: 1;
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;

    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 0 95%;
    -moz-transform-origin: 0 95%;
    transform-origin: 0 95%;
}

To overwrite it you can either access your own class you added to the modal container, or style the simple-modal class itself.