Null Pointer Micromanagement

    jquery.modal

    0.2.4 • Public • Published

    Synopsis

    This is a small-ish (~2kB minified, ~1kB gzipped) modal plugin for jQuery. While most modal plugins try to handle all interactions themselves, jQuery.modal only provides the modal dialog and overlay.

    Basic usage example

    Try it on jsfiddle.

    var $modal = $('<div/>')
      .text('Hello World! Click to dismiss.')
      .css({color: 'red', background: 'white', cursor: 'pointer'})
      .modal()
      .modal('open')
      .on('click', function() {
        $modal.modal('close');
      });

    More realistic example

    Try it on jsfiddle.

    HTML

    <a class="open-btn">Open</a>
    <div class="my-dialog">
      <h1>Hello World!</h1>
      <a class="close-btn">Close</a>
    </div>

    CSS

    .my-dialog {
      border: 2px solid black;
      background-color: papayawhip;
      color: red;
      padding: 5px;
    }
    .open-btn.close-btn {
        border: 1px solid black;
        cursor: pointer;
    }

    JavaScript

    var $dialog = $('.my-dialog').modal();
    $dialog.on('click', '.close-btn', function(e) {
      e.preventDefault();
      $dialog.modal('close');
    });
    $('.open-btn').on('click', function(e) {
      e.preventDefault();
      $dialog.modal('open');
    });

    API

    modal([options])

    Wraps the matched content in a modal dialog intialized with the given options.

    NOTE: The matched content will be removed from the page if necessary.

    modal('open')

    Reveals the overlay and modal dialog.

    modal('close')

    Hides the modal dialog and overlay.

    modal('center')

    Centers the modal dialog on the screen. This is called automatically every time open is called.

    Version added: 0.2.3

    modal('option', name)

    Returns the current value of the option name for this modal dialog.

    modal('option', name, value)

    Sets the value of the option name for this modal dialog to the given value. Returns the new value.

    modal.defaults

    The default options used by new modal dialogs.

    NOTE: Changes will be reflected by existing modal dialogs unless the option was set explicitly on initialization or with modal('option', name, value). This is intentional.

    showFn(callback)

    Function to be called in order to reveal the dialog. Must call the passed callback when the animation is complete.

    Default:

    function(callback) {
      this.fadeIn(200, callback);
    }

    hideFn(callback)

    Function to be called in order to hide the dialog. Must call the passed callback when the animation is complete.

    Default:

    function(callback) {
      this.fadeOut(200, callback);
    }

    modal.overlay

    Options used by the overlay.

    showFn(callback)

    Function to be called in order to reveal the overlay. Must call the passed callback when the animation is complete.

    Default:

    function(callback) {
      this.fadeTo(200, 0.5, callback);
    }

    hideFn(callback)

    Function to be called in order to hide the overlay. Must call the passed callback when the animation is complete.

    Default:

    function(callback) {
      this.fadeOut(1, callback);
    }

    Acknowledgements

    Inspired by edwardhotchkiss' jQuery.leanerModal, which is in turn based on finelysliced's jQuery.leanModal.

    Unlicense

    This is free and unencumbered public domain software. For more information, see http://unlicense.org/ or the accompanying UNLICENSE file.

    Keywords

    none

    Install

    npm i jquery.modal

    DownloadsWeekly Downloads

    7

    Version

    0.2.4

    License

    none

    Last publish

    Collaborators

    • pluma