Pop Script is systematic way to design modal boxes, lightboxes, dropdown menus, tooltips, and any other dynamic element.

This page's popscript

basic: {   
    STYLE: {
        CLASS: {
            box: 'simple-box',
            cover: 'curtain',
            cross: 'cross'
        }
    },
    ANIMATION: {   
        IN: {
            box: 'zap-in cubic-bezier(.73,.75,.72,1.77)',
            cover: 'fade-in',
            duration: 300
        },
        OUT: {
            box: 'zap-out cubic-bezier(.73,.75,.72,1.77)',
            cover: 'fade-out',
            duration: 200   
        }
    },
    POSITION: {
        x: 'auto',
        y: 'auto'   
    },
    
    cover: 'yes',
    cross: 'yes',
    cross_content: 'x',
    esc: 'ye',   
    full_draggable: 'yes'
},

success: {
    STYLE: {
        CLASS: {
            box: 'success'
        }
    },
    ANIMATION: {
        IN: {
            box: 'drop'
        },
        OUT: {
            box: 'undrop'
        }
    },
    POSITION: {
        y: 'top'
    },
    
    cross: 'no',
    full_draggable: 'naaaaoh',
    click_me_out: 'yes, tis is convenient'
},

error: {
    STYLE: {
        CLASS: {
            box: 'error'
        }
    },
    ANIMATION: {
        IN: {
            box: 'short-arrive-left, fade-in'
        },
        OUT: {
            box: 'fade-out'
        }
    },
    POSITION: {
        x: '!10',
        y: '10'
    }
},

dropdown: {
    STYLE: {
        CLASS: {
            box: 'dropdown'
        }
    },
    ANIMATION: {
        IN: {
            duration: 90
        },
        OUT: {
            box: ''
        }
    },
    POSITION: {
        z: '-1'
    },
    
    cross: 'no',
    cover: 'no',
    full_draggable: 'no'
},

context_menu: {
    STYLE: {
        CLASS: {
            box: 'context-menu'
        }
    },
    ANIMATION: {
        IN: {
            box: ''
        },
        OUT: {
            box: 'fade-out',
            duration: 120
        }
    },
    POSITION: {
        fixed: 'no',
        z: '-1'
    },
    
    cover: 'no',
    cross: 'no',
    full_draggable: 'no'
},

tooltip: {   
    STYLE: {
        CLASS: {
            box: 'popscript-tooltip'
        }
    },
    ANIMATION: {
        OUT: {
            box: 'fade-out'
        }
    },
    POSITION: {
        z: '-1'
    },
    
    click_me_out: 'yeh',   
    cross: 'no',
    cover: 'no',
    blur: 'no',
    esc: 'yes',
    full_draggable: 'no'
},

tip_left: {
    STYLE: {
        CLASS: {
            box: 'popscript-tooltip left'
        }
    },
    ANIMATION: {
        IN: {
            box: 'short-arrive-left, fade-in'
        }
    }
},
tip_right: {
    STYLE: {
        CLASS: {
            box: 'popscript-tooltip right'
        }
    },
    ANIMATION: {
        IN: {
            box: 'short-arrive-right, fade-in'
        }
    }
},
tip_up: {
    STYLE: {
        CLASS: {
            box: 'popscript-tooltip up'
        }
    },
    ANIMATION: {
        IN: {
            box: 'short-arrive-up, fade-in'
        }
    }
},
tip_down: {
    STYLE: {
        CLASS: {
            box: 'popscript-tooltip down'
        }
    },
    ANIMATION: {
        IN: {
            box: 'short-arrive-down, fade-in'
        }
    }
},

roller: {
    STYLE: {
        CLASS: {
            box: 'roller'
        }
    },
    ANIMATION: {
        IN: {
            box: 'newspaper',
            duration: 800
        }
    },
    POSITION: {
        x: 'auto',
        y: '8%',
        roller: 'yes'
    }
}

Flexible

Throw in pop (up) with a translucent cover if you like, enable/disable dispatching your pop with the 'esc' key, control which element in the pop will allow the user to drag it around. As of now there are 24 properties which can be set, and more counting.

Organized

PopScript is organized into 'pop classes' all in one place, which can be then powerfully be combined together to form inheritance of properties very similar to that of css.

Simple

After the popscript.js and popscript.css files have been inserted into the webpage one can as simply deploy a pop (up) as follows:

pop('Your comment was successfully posted!');

Further using pop classes is as simple as:

pop('The transaction has been completed. Thank you!', 'success');

OR(depending on the situation)

pop('The transaction could not be completed. Please try again later', 'error');

Robust

Giving you features such as positioning fixed or non fixed, dragging, closing by clicking on the cover and/or by hitting the escape key, specifying CSS animations for better experiences, issuing align checks on the pops visible and all very well tested.

Scalable

PopScript takes into account the scalability of your entire application: Your application may need 1, 2, 3, 4....., n number of pop ups, tooltips, dropdowns and other pops; PopScript will not only let you create as many pops as you want, it will even let you have all of them occur at the same time concurrently.

Dependency Free

The only js file you need is 'popscript.js', and the only css file 'popscript.css'
This is because PopScript has been built to be free from any dependency, be it jquery.js or underscore.js, there is complete independence of any library.

Open Source & Free

Licensed under the great MIT License, this is an open source initiative, with no monetary cost to the developers using it, both for personal and/or commerical usage.