Cacher is the code snippet organizer for pro developers

/*
 * Simple Modal
 */
 
/***********************************************************
 ***********************************************************

 Markup 1 Inline Element:

 <p><a class="simple-modal-btn" href="#modal1">Modal 1</a></p>

 <div id="modal1" class="simple-modal">
     <h2>Modal 1</h2>
     <div>Lorem ipsum dolor sit amet...</div>
 </div>
 
 Markup 2 iFrame/Video:

 <button class="simple-modal-btn" data-target="#modal2">iFrame</button>
 
 <div id="modal2" class="simple-modal">
    <iframe src="#"></iframe>
 </div>

 Usage
 $('.simple-modal-btn').simpleModal();

 ***********************************************************
 ***********************************************************/

(function ($) {
 
    $.fn.simpleModal = function(options) {

        // Default options.
        var settings = $.extend({
            modalFade: 400
        }, options );

        var modalOpen = 'js-modal-open';

        $('.simple-modal')
            // Add CLose Button
            .append('<span class=js-simple-modal-close>close</span>')
            // Add Wrapper for Responsive Media
            .children('iframe, video').wrap('<div class=js-simple-modal-media />').end()
            // Add Wrapper
            .wrapInner('<div class=js-simple-modal><div class=js-simple-modal-wrapper><div class=js-simple-modal-content/></div></div>')
            // Append Overlay
            .append('<span class=js-simple-modal-overlay />')
            // Hide on load
            .hide();

        // Click
        this.click(function(event){

            // Stop Links
            event.preventDefault();

            // Check attribute type
            if ($(this).is('[href]')){
                var modalSource = $(this).attr('href');
            } else if ($(this).is('[data-target]')){
                var modalSource = $(this).attr('data-target');
            }

            // Target Modal Content
            $(modalSource).fadeIn(settings.modalFade).addClass(modalOpen);
        });

        // Close Modal Window
        $('.js-simple-modal-overlay, .js-simple-modal-close').click(function() {
            $(this).closest('.simple-modal').fadeOut(settings.modalFade).removeClass(modalOpen);
        });

    };
 
}( jQuery ));