https://github.com/interactive-pioneers/iptools-jquery-modal

Multifunctional jQuery modal component.
https://github.com/interactive-pioneers/iptools-jquery-modal

iptools-jquery-modal jquery modal

Last synced: about 1 month ago
JSON representation

Multifunctional jQuery modal component.

• Host: GitHub
• URL: https://github.com/interactive-pioneers/iptools-jquery-modal
• Owner: interactive-pioneers
• License: gpl-3.0
• Created: 2015-05-18T12:37:31.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-05-18T12:21:35.000Z (over 7 years ago)
• Last Synced: 2024-09-19T17:10:52.389Z (2 months ago)
• Topics: iptools-jquery-modal, jquery, modal
• Language: JavaScript
• Homepage:
• Size: 271 KB
• Stars: 0
• Watchers: 13
• Forks: 3
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# iptools-jquery-modal [![Build Status](http://img.shields.io/travis/interactive-pioneers/iptools-jquery-modal.svg)](https://travis-ci.org/interactive-pioneers/iptools-jquery-modal) [![npm version](https://badge.fury.io/js/iptools-jquery-modal.svg)](https://badge.fury.io/js/iptools-jquery-modal) [![Bower version](https://badge.fury.io/bo/iptools-jquery-modal.svg)](http://badge.fury.io/bo/iptools-jquery-modal)

Multifunctional jQuery modal component.

## Features

- Display content inside modal overlay from:

  - static container in DOM by ID

  - AJAX endpoint that delivers markup

  - Rails UJS-driven AJAX that delivers a partial

- CSS3 transitions and animations

- Exit by:

  - `ESC` key

  - Click outside the modal

## Options

See inline comments in [Example](#example). All options are optional.

## Requirements

- `jQuery >=1.11.3 <4.0.0`

## Example

```html

Content from DOM-Element

trigger modal

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


Content from AJAX endpoint

trigger modal


Content from Rails UJS AJAX endpoint using



  
anchor: trigger modal

  

button: trigger modal





  $(document).ready(function() {

    $('.js_trigger-modal').iptModal({

      animationDuration: 500, // Animation duration in ms

      closeOnESC: true, // Modal closed on ESC key

      closeOnClickOutside: true, // Modal closed if clicked outside / on overlay

      closeButton: true, // Add close button to modal

      height: 'auto', // Modal height

      modalClass: 'modal', // CSS class for modal styling

      modalId: 'modal', // ID assigned to modal

      modalVAlignTopClass: 'modal--vertical-align-top', // CSS rules setting vertical alignment of the modal

      modalVAlignCenterClass: 'modal--vertical-align-center', // CSS rules setting vertical alignment of the modal

      modifiers: '', // Modifier classes e.g. modal--no-padding

      overlayClass: 'overlay',

      showSpinner: true, // Enable/disable loader animation

      spinnerHTML: '', // Loader HTML

      width: '80%', // Modal width

      zIndex: 102, // CSS z-index

      recreate: true // whether or not to recreate modal if already existing

    });

  });

```

## CSS3-Effects

- scale

- slideinbottom

- slideinright

## Licence

Copyright © 2015-2017 Interactive Pioneers GmbH, contributors. Licenced under [GPL-3](LICENSE).