Minimal Popup Box With CSS3 Animations - jQuery popup-js

A lightweight, responsive, configurable, CSS3 animated popup jQuery plugin for creating custom alert, confirmation, prompt dialog boxes on the web page.

More features:

• 4 actions: close, confirm, cancel, submit.
• HTML content in popup.
• Custom popup header & body.
• Custom CSS3 animations.
• Allows you to fix the popup on the page.
• Easy to extend using your own CSS.

How to use it:

1. To use this popup plugin, insert jQuery library and the following files into the document.

<link href="/path/to/popup-js.css" rel="stylesheet">
<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/popup-js.js"></script>

2. Create a basic popup for alert messages.

let myPopup = $().popup({
    title: "I'm a popup!",
    content: "Popup Message Here"
});

myPopup.openPopup();

3. Enable/disable controls (with action callbacks) to create custom popup boxes such as confirmation dialog, prompt dialog, etc.

let myPopup = $().popup({
    title: "I'm a popup!",
    content: "Popup Message Here",
    controls: {
      close: true,
      confirm: false,
      cancel: false,
      submit: false
    },

    actions: [
      { name: "close", callback: null },
      { name: "confirm", callback: null },
      { name: "cancel", callback: null },
      { name: "submit", callback: null }
    ]
});

myPopup.openPopup();

4. Create a 'sticky' popup box that will always be centered no matter how you scroll the web page.

let myPopup = $().popup({
    title: "I'm a popup!",
    content: "Popup Message Here",
    fixed: true
});

myPopup.openPopup();

5. Sometimes you might need a non-closeable popup.

let myPopup = $().popup({
    title: "I'm a popup!",
    content: "Popup Message Here",
    hidden: false
});

myPopup.openPopup();

6. Determine whether or not to show the header. Default: true.

let myPopup = $().popup({
    title: "I'm a popup!",
    content: "Popup Message Here",
    header: false
});

myPopup.openPopup();

7. The popup plugin currently comes with 2 themes: 'modern' (default), and 'classic'.

let myPopup = $().popup({
    title: "I'm a popup!",
    content: "Popup Message Here",
    layout: "classic"
});

myPopup.openPopup();

8. Customize the CSS3 animation.

let myPopup = $().popup({
    animated: true,
    transitionOnOpen: {
        top: true,
        right: false,
        bottom: false,
        left: false,
        fade: true
    },
    transitionOnOpenAmmount: "20%",
    transitionOnClose: {
        top: true,
        right: false,
        bottom: false,
        left: false,
        fade: true
    },
    transitionOnCloseAmmount: "-100%",
});

9. Customize the appearance of the popup box with the following CSS classes.

let myPopup = $().popup({
    style: {
      main: "pu_popup",
      header: "pu_popup-header",
      body: "pu_popup-body",
      controls: "pu_popup-controls",
      control: "pu_popup-ctrl",

      fixed: "pu_popup-fixed",

      animated: "pu_popup-animated",
      hidden: "pu_popup-hidden",
      transitionTop: "pu_popup-top",
      transitionRight: "pu_popup-right",
      transitionBottom: "pu_popup-bottom",
      transitionLeft: "pu_popup-left",

      modern: "pu_popup-modern",
      classic: "pu_popup-classic"
    }
});

---

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