Skip to content

Latest commit

 

History

History
317 lines (265 loc) · 7.22 KB

README.md

File metadata and controls

317 lines (265 loc) · 7.22 KB

Popelt

A Lightweight Responsive Dynamic Modal Popup jQuery Library

Check: Demo & Github

Download: Minified(5kb)   Source

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]
    </td>
</tr>
<tr>
	<td>setContent</td>
    <td>content</td>
    <td>
    	**content** - Body content of the popup

        Can be HTML or Plain text
    </td>
</tr>
<tr>
	<td>show

    	showPopup
    </td>
    <td>-</td>
    <td>Show the popup</td>
</tr>
<tr>
	<td>close

        closePopup

	</td>
    <td>-</td>
    <td>
    	Close the popup
    </td>
</tr>
<tr>
	<td>addOKButton</td>
    <td>clickEvent</td>
    <td>
    	Add a button with "OK" as label

        **clickEvent** - On click event
    </td>
</tr>
<tr>
	<td>addCloseButton</td>
    <td>-</td>
    <td>
    	Add a button with "Close" as label. It will close the popup
    </td>
</tr>
<tr>
	<td>addCancelButton</td>
    <td>-</td>
    <td>
    	Add a button with "Cancel" as label. It will close the popup
    </td>
</tr>

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.

        <small>_Not displayed if empty_</small>
    </td>
</tr>
<tr>
	<td>width</td>
    <td>number</td>
    <td>600</td>
    <td>Width of the popup.

    	Accepts percent (%) or pixels (px)
    </td>
</tr>
<tr>
	<td>maxHeight</td>
    <td>number</td>
    <td></td>
    <td>Give max height to the content container for longer content.

    	A scrollbar will appear if content overflows.
    </td>
</tr>
<tr>
	<td>offsetTop</td>
    <td>number</td>
    <td>vertically centered</td>
    <td>If the popup needs to appear some pixels away from the top instead of being vertically centered.
    </td>
</tr>
<tr>
	<td>responsive</td>
    <td>boolean</td>
    <td>false</td>
    <td> **true** or **false**

    Width of the popup will be maximum 100%;</td>
</tr>
<tr>
	<td>closeButton</td>
    <td>boolean</td>
    <td>true</td>
    <td>Display the **"&times;"** close button on top right.</td>
</tr>
<tr>
	<td>closeBtnTooltip</td>
    <td>text</td>
    <td>"Close"</td>
    <td>Tooltip for the default **"&times;"** clsoe button on top right.

    	Give **false** if to hide.
 </td>
</tr>
<tr>
	<td>overlayColor</td>
    <td>CSS Color</td>
    <td>black</td>
    <td>Change color of the overlay background.

    	Accepts CSS color names or hex color codes.
    </td>
</tr>
<tr>
	<td>overlayOpacity</td>
    <td>0.0 - 1.0</td>
    <td>0.9</td>
    <td>Transparency of overlay background. Accepts CSS '_opacity_' values.</td>
</tr>
<tr>
	<td>focus</td>
    <td>boolean</td>
    <td>false</td>
    <td>If want to focus on the first '_input_' or '_textarea_' when the popup is opened.</td>
</tr>
<tr>
	<td>escClose</td>
    <td>boolean</td>
    <td>true</td>
    <td>Allow popup to close by pressing "Escape" or "Esc" key.</td>
</tr>
<tr>
	<td>closeClass</td>
    <td>string</td>
    <td>"pop-close"</td>
    <td>If want any link **&lt;a&gt;** or **button** or any element inside your content to trigger **popup close**, give it this classname.</td>
</tr>
<tr>
	<td>fadeSpeed</td>
    <td>number</td>
    <td>200</td>
    <td>Speed of fade animation while closing popup. Accepts jquery speed value for fadeOut.</td>
</tr>
<tr>
	<td>buttons</td>
    <td>Array object</td>
    <td></td>
    <td>Syntax:

    	<pre class="code">[{ label [,classname] [,clickEvent]}]</pre>

        Example:

[
  { label: 'Save changes', 
    classname: 'primary', 
    clickEvent: function(){alert('Saving changes');}
  },
  { label: 'Close'}
]
	</td>
</tr>
<tr>
	<td>contentType</td>
    <td>**"ajax"** or **"iframe"** or **#elementID**</td>
    <td></td>
    <td>
    	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).
    </td>
</tr>
<tr>
	<td>loadUrl</td>
    <td>string</td>
    <td></td>
    <td><small>Applied for contentType AJAX and Iframe.</small>

    	Source URL to load via AJAX or iframe.

		<small>_Note: Currently do not support cross-domain URL for AJAX_</small>
    </td>
</tr>
<tr>
	<td>iframeHeight</td>
    <td>number</td>
    <td>300px</td>
    <td>Set height for Iframe content.

    	<small>Accepts percent (%) or pixels (px)</small>

        <small>_Dynamic height coming soon._</small>
    </td>
</tr>
<tr>
	<td>iframeWidth</td>
    <td>number</td>
    <td>100%</td>
    <td>Set width for the Iframe content.

    	<small>Accepts percent (%) or pixels (px)</small>
    </td>
</tr>

Requires

  • jQuery 1.9.1 or above

Coming soon

  • IFrame dynamic height - Auto content height
  • Forms - Built in form submitting from popup

Check: Demo   Github

Download: Minified(5kb)   Source

Develped by Elton Jain / @eltonjain