Versatile Dialog Popup In JavaScript – fancy-modal

Category: Javascript , Modal & Popup | December 30, 2019
Author: gutuJosh
Views Total: 103 views
Official Page: Go to website
Last Update: December 30, 2019
License: MIT

Preview:

Versatile Dialog Popup In JavaScript – fancy-modal

Description:

A fancy and versatile popup plugin to create animated, customizable modal windows & dialog boxes on the page.

Features:

  • Dark & light backdrops.
  • Can be used as info/warning/alert/success alert dialogs.
  • Supports any modal content. Not only images & text.
  • 8 awesome transition effects.
  • Custom action buttons.

How to use it:

1. Download and load the fancy-modal’s files in the document.

<link href="fancy-modal.css" rel="stylesheet" />
<script src="fancy-modal.js"></script>

2.  Create a new fancy modal instance.

let modal = new FancyModal({
    'content': 'HTML Content Here'
});

// or
let modal = new FancyModal({
    'message': 'HTML Content Here'
});

3. Open the modal when needed.

modal.open();

4. Display an image in the modal.

let modal = new FancyModal({
    'modalType': 'image',
    'imageSrc': '1.jpg',
});

5. Determine the modal type.

  • info
  • warning
  • alert
  • success
let modal = new FancyModal({
    'modalType': 'alert',
    'message': 'This is an alert message'
});

6. Create a confirmation dialog.

let modal = new FancyModal({
    'buttonAction' : () => alert('You clicked "Delete" buton!'),
    'title':'<h3>WARNING!</h3>',
    'message':'Are you shure you want to delete this post?',
    'okBtnTxt':'Delete',
    'koBtnTxt':'Cancel'
});

7. All possible transition effects:

  • fade-and-zoom
  • fade-and-slide-down (default)
  • fade-and-slide-left
  • fade-and-slide-right
  • fade-and-slide-up
  • fade-and-bounce-in
  • flip-card
  • flip-card-drop-down
let modal = new FancyModal({
    'modalType': 'image',
    'imageSrc': '1.jpg',
    'className': 'fade-and-bounce-in'
});

8. All default configuration options.

let modal = new FancyModal({
    modalType:'info',
    className: 'fade-and-slide-down',
    content: "",
    title:false,
    message:false,
    maxWidth: 600,
    minWidth: 300,
    overlay: 'dark', // or lightbox
    buttonAction: false,
    okBtnTxt: 'Continue',
    koBtnTxt: 'Cancel'
});

You Might Be Interested In:


Leave a Reply