jquery-confirm: a popup jQuery plugin

 

A jQuery plugin that provides a great set of features like Auto-close, Ajax-loading, Themes, Animations, and more.

Official site

How to use it?

Step1:

jquery, jquery-confirm js and CSS

can do with nom, bower, or CDN

$ npm install jquery-confirm

or

$ bower install craftpip/jquery-confirm

or

<script src="//https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

Step2:

my HTML and CSS

I set up a button, you can do any DOM you want.

Step3:

JavaScript

select the DOM,and fire up with .confirm(), also can do .dialog() or .alert()

content:the box content

title: the title in the content

icon: the icon in content, can do with font-awesome like my code, remember to link the font-awesome CSS file though

type: the color set in box

columnClass: change the size of box with preset

boxWidth: set the customized width

draggable: the box is draggable when set to true

buttons: set the button you want to show in the box with the actions function

autoClose: select the buttons you want to autoclose with the time setup

More customizations go official site

My demo:

👉Follow me for more useful web development content! Love Sharing. 🥰