Helium-Modal

Helium-modal is a jQuery modal window script, developed by Harun Eggleton under the open source MIT licence.

download latest release

Features:

No required set widths
Fully CSS stylable
Recenters if size of modal changes
Customizable show/hide animation
Triggered through a link or javascript

Examples:

open modal #1 open modal #1 again open modal #2

Usage:

1: include required files

include the following scripts as follows before the end of the BODY tag

↓ select all

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/helium.mutate.js"></script>
<script src="js/helium.modal.js"></script>

2: Add required HTML

add the following customizable modal template after your opening BODY tag

↓ select all

<div id="your-modal-id" class="helium-modal">
    <div class="modal">
        <a href="" class="close x-button">&times;</a>
        content for your modal
    </div>
</div>

use the data-mid custom attribute on any link that you wish to trigger your modal

↓ select all

<a href="" data-mid="your-modal-id">your button text</a>

3: Add CSS

Add the following CSS in main.css (or any desired css location)

↓ select all

/* ====================================================================
   Helium Modal styles
   ==================================================================== */
/* === essential styles === */
.helium-modal{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 2000;
    display: none;
    }
.helium-modal .modal{
    position: absolute;
    left: -9999px;
    }
/* === customizable styles === */
.helium-modal .modal{
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.2);
    }
.helium-modal .modal a.x-button{
    position: absolute;
    top:3px;
    right:6px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-size: 20px;
    line-height: 20px;
    color: #222;
    }

...or SASS

Here it is in SASS format

↓ select all

/* ====================================================================
   Helium Modal styles
   ==================================================================== */
/* === essential styles === */
.helium-modal{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 2000;
    display: none;
    .modal{
        position: absolute;
        left: -9999px;
/* === customizable styles === */
        background-color: #ffffff;
        padding: 20px;
        box-shadow: 0 4px 4px rgba(0,0,0,0.2);
        a.x-button{
            position: absolute;
            top:3px;
            right:6px;
            font-weight: bold;
            font-family: Arial, Helvetica, sans-serif;
            text-decoration: none;
            font-size: 20px;
            line-height: 20px;
            color: #222;
        }
    }
}

4: initialize

Place the follow before the end of the BODY tag to initialize all modals

↓ select all

<script type="text/javascript" charset="utf-8">
$(function() {
    $(".helium-modal").each( function(){
        $(this).heliumModal({
            vert: 50,                // Vertical position on the screen in percentage.  50 centers the modal
            speed: 500,              // Speed for appearing and disapearing animations
            easing: 'swing',         // Easing style for animations.  use standard jquery easing options.
            onOpen: function(){ },   // callback for custom JS before modal opens
            afterOpen: function(){ },// callback for custom JS after modal opens
            onClose: function(){ },  // callback for custom JS before modal closes
            afterClose: function(){ }// callback for custom JS after modal closes
        });
    });
});
</script>

Alternatives: "I want an additional close or cancel button in my modal"

just use the "close" class on any element in your modal that should act as a close link. Like so…

↓ select all

<div id="your-modal-id" class="helium-modal">
    <div class="modal">
        <a href="" class="close x-button">&times;</a>
        content for your modal<br>
        <a href="" title="" class="close">additional close link</a>
    </div>
</div>

Alternatives: "I want to open or close my modal via javascript"

use the following jQuery inside any event

↓ select all

// to open ...
$('#your-modal-id').heliumModal('openModal');
// to close ...
$('#your-modal-id').heliumModal('closeModal');

Alternatives: "I want to initialize my modals separately"

If you want a different initialization for each modal just remove the "each" wrapper from the initialization script like so…

↓ select all

<script type="text/javascript" charset="utf-8">
$(function() {
    // repeat for each of your modals ===============================
    vert: 50,                // Vertical position on the screen in percentage.  50 centers the modal
    speed: 500,              // Speed for appearing and disapearing animations
    easing: 'swing',         // Easing style for animations.  use standard jquery easing options.
    onOpen: function(){ },   // callback for custom JS before modal opens
    afterOpen: function(){ },// callback for custom JS after modal opens
    onClose: function(){ },  // callback for custom JS before modal closes
    afterClose: function(){ }// callback for custom JS after modal closes
    });
    // end repeat ===================================================
});
</script>