https://github.com/scazzy/popelt

Popelt - A Lightweight Responsive Dynamic Modal Popup jQuery Library
https://github.com/scazzy/popelt

Last synced: about 1 month ago
JSON representation

Popelt - A Lightweight Responsive Dynamic Modal Popup jQuery Library

• Host: GitHub
• URL: https://github.com/scazzy/popelt
• Owner: scazzy
• Created: 2013-09-05T06:51:40.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2015-04-19T14:43:39.000Z (over 9 years ago)
• Last Synced: 2023-03-24T07:43:14.961Z (over 1 year ago)
• Language: HTML
• Homepage: http://labs.welbour.com/popelt/
• Size: 314 KB
• Stars: 10
• Watchers: 6
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Popelt

### A Lightweight Responsive Dynamic Modal Popup jQuery Library

* * *

Check: [Demo](http://labs.welbour.com/popelt/) &

[Github](https://github.com/scazzy/Popelt)

Download: [Minified](https://github.com/scazzy/Popelt/blob/master/minified/popelt-v1.0.min.js)(5kb)   [Source](https://github.com/scazzy/Popelt/blob/master/source/popelt-v1.0-source.js)

* * *

### Features

*   Modal

*   Responsive

*   Dynamic Buttons

*   Dynamic content - **Ajax**, **Iframe**, or **template**

*   First input focus

*   Dynamic positioning

*   Escape to close

*   Multiple / nested popups and open stack handling

*   Dynamic overlay background color and opacity

*   Simple to use

*   IE7+ compatibility

*   Extreme Lightweight (just ~5kb compressed)

### Example


var MyPopup = new Popelt({

    title: 'Pop some cash',

    content: ''Hey wasup! This is my content.'

}).show();



### Methods

    

    	Method name

        Parameters

        Description

    

	

    	addButton

        label [,class] [,clickEvent]

        

        	**label** - Name on button

            **class** - custom class to give to the button [optional]

            **clickEvent** - Function to execute on click of button. If not provided, by default triggers popup close [optional]

        

    

    

    	setContent

        content

        

        	**content** - Body content of the popup

            Can be HTML or Plain text

        

    

    

    	show

        	showPopup

        

        -

        Show the popup

    

    

    	close

	        closePopup

		

        -

        

        	Close the popup

        

    

    

    	addOKButton

        clickEvent

        

        	Add a button with "OK" as label

            **clickEvent** - On click event

        

    

    

    	addCloseButton

        -

        

        	Add a button with "Close" as label. It will close the popup

        

    

    

    	addCancelButton

        -

        

        	Add a button with "Cancel" as label. It will close the popup

        

    

### Settings / Attributes

	

    	Setting

        Values

        Default

        Description

    

	

    	modal

        boolean

        false

        **true** or **false**

    

    

    	title

        text

        

        _Not displayed if empty_

    

    

    	content

        string / html

        

        Popup body content.

        	HTML or Text string.

            _Not displayed if empty_

        

    

    

    	width

        number

        600

        Width of the popup.

        	Accepts percent (%) or pixels (px)

        

    

    

    	maxHeight

        number

        

        Give max height to the content container for longer content.

        	A scrollbar will appear if content overflows.

        

    

    

    	offsetTop

        number

        vertically centered

        If the popup needs to appear some pixels away from the top instead of being vertically centered.

        

    

    

    	responsive

        boolean

        false

         **true** or **false**

        Width of the popup will be maximum 100%;

    

    

    	closeButton

        boolean

        true

        Display the **"×"** close button on top right.

    

    

    	closeBtnTooltip

        text

        "Close"

        Tooltip for the default **"×"** clsoe button on top right.

        	Give **false** if to hide.

	 

    

    

    	overlayColor

        CSS Color

        black

        Change color of the overlay background.

        	Accepts CSS color names or hex color codes.

        

    

    

    	overlayOpacity

        0.0 - 1.0

        0.9

        Transparency of overlay background. Accepts CSS '_opacity_' values.

    

    

    	focus

        boolean

        false

        If want to focus on the first '_input_' or '_textarea_' when the popup is opened.

    

    

    	escClose

        boolean

        true

        Allow popup to close by pressing "Escape" or "Esc" key.

    

    

    	closeClass

        string

        "pop-close"

        If want any link **<a>** or **button** or any element inside your content to trigger **popup close**, give it this classname.

    

    

    	fadeSpeed

        number

        200

        Speed of fade animation while closing popup. Accepts jquery speed value for fadeOut.

    

    

    	buttons

        Array object

        

        Syntax:

        	
[{ label [,classname] [,clickEvent]}]


            Example:


[

  { label: 'Save changes', 

    classname: 'primary', 

    clickEvent: function(){alert('Saving changes');}

  },

  { label: 'Close'}

]

		

    

    

    	contentType

        **"ajax"** or **"iframe"** or **#elementID**

        

        

        	You can add dynamic content via AJAX, or embed a video or a webpage using iframe,


			or take the content from an existing element in the DOM using '#' (for element ID).

        

    

    

    	loadUrl

        string

        

        Applied for contentType AJAX and Iframe.

        	Source URL to load via AJAX or iframe.

			_Note: Currently do not support cross-domain URL for AJAX_

        

    

    

    	iframeHeight

        number

        300px

        Set height for Iframe content.

        	Accepts percent (%) or pixels (px)

            _Dynamic height coming soon._

        

    

    

    	iframeWidth

        number

        100%

        Set width for the Iframe content.

        	Accepts percent (%) or pixels (px)

        

    

### Requires

*   jQuery 1.9.1 or above

### Coming soon

*   IFrame dynamic height - Auto content height

*   Forms - Built in form submitting from popup

* * *

Check: [Demo](http://labs.welbour.com/popelt/)  

[Github](https://github.com/scazzy/Popelt)

Download: [Minified](https://github.com/scazzy/Popelt/blob/master/minified/popelt-v1.0.min.js)(5kb)   [Source](https://github.com/scazzy/Popelt/blob/master/source/popelt-v1.0-source.js)

* * *

Develped by Elton Jain / [@eltonjain](http://twitter.com/eltonjain)