Minimal Animated Popup Box Plugin - jQuery gsPop

gsPop is a lightweight (2.8 kb) jQuery modal popup plugin created for inline alert/confirm dialog boxes.

The plugin help developers create and display customizable, responsive, CSS3 animated, modal-style popup boxes from inline content within the document.

How to use it:

1. Load the core stylesheet.

<link href="dist/gspop.css" rel="stylesheet">

2. Load the default theme.

<link href="dist/default_theme.css" rel="stylesheet">

3. Load the gspop-animate.css for CSS3 based open/close animations.

<link href="dist/gspop-animate.css" rel="stylesheet">

4. Load the gspop-postion.css for additional placement options.

<link href="dist/gspop-postion.css" rel="stylesheet">

5. Insert modal content into a DIV container.

<div class="gs-Modal hide" id="example">
  <div class="gs-header">
    <h2>
      Modal Title
    </h2>
  </div>
  <div class="gs-body">
    <p>
      Modal Body
    </p>
  </div>
  <div class="gs-footer">
    <button class="gs-confirm">Confirm</button>
    <button class="gs-cancel">Cancel</button>
  </div>
</div>

6. Initialize the modal popup.

var modal = $('#example').gsPop();

7. Launch the modal popup when needed.

var modal = $('#example').gsPop();

8. Override the default open/close animations. All possible animation classes:

• gspop-fadeIn
• gspop-fadeOut
• gp-flipIn
• gp-flipOutX

var modal = $('#example').gsPop({
    animate: {
      apply: true,
      hide: 'animated gp-flipOutX',
      show: 'animated gp-flipIn'
    }
});

9. Config the background overlay.

var modal = $('#example').gsPop({
    backdrop: {
      show: true,
      clickable: true // click to close the modal
    }
});

10. Change the position of the modal popup. All possible position options:

• gspop-center-center
• gspop-top-center
• gspop-top-left
• gspop-top-right
• gspop-right-center
• gspop-right-bottom
• gspop-bottom-center
• gspop-bottom-left

var modal = $('#example').gsPop({
    modalClasses: "gspop-position gspop-center-center",
});

11. Default CSS classes for the modal popup.

var modal = $('#example').gsPop({
    modalClasses: "gspop-modal-position",
    bodyClass: "gspop-opened",
    modal: "gs-Modal"
});

12. API.

// check if is shown
gspop.shown 

// check if is hidden
gspop.hidden

// closes the modal popup
gspop.close

// opens the modal popup
gspop.open

---

This awesome jQuery plugin is developed by shabi1497. For more Advanced Usages, please check the demo page or visit the official website.