jQuery-confirm---a multipurpose plugin for alert, confirm & dialog, with Super powers.

-

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

 Featurers:
  • Listen keyboard keys
  • Directly load content via Ajax
  • Auto-close dialog after a specified time
  • prevent Dialog close on background click
  • callback function, and ton more
Github here

 More documents here

 Step1:
head










body bottom
Link jquery-confirm plugin via CDN:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
via Bower:
Simply copy these links 
$ bower install craftpip/jquery-confirm
via Npm: 
$ npm install jquery-confirm

 Link bootstrap 4 if you want to apply it. 
 <!-- Latest compiled and minified CSS -->  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  
   <!-- Optional theme -->  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
<!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Link font-awesome if you want to apply in button.
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Step2:
html
 Set up an id name for each image or button for fetching quickly in javascript.
css
Give some embellish with css.

 Step3:
Let's analyze js part.
alert
When click the image, a pop-up show up with customized title and content.




confirm

There is a question in the confirm box which can lead you to different function.When choose 'yes', the url location will target to a new href in attribute.



prompt
If you want user type something which can show up later, the prompt method is a easy way. When user submit the answer, new window will show with customized content.Meanwhile the typing stuff will be verified before show. 


button
A button with a icon from font-awesome and a purple animated theme type can also controled by the keyboard when press down the specified word. isHidden: for hiding the no button but can control with key word 'N'. 



draggable
The new window can be draggable on screen and also can set dragWindowGap pixel width.



loading
It's an useful way to show up the content with Ajax.  
setContentPrepend: show the content when the window open.
setContentAppend: add new things after 3 seconds.
columeClass: the width type of the window.


Popular posts from this blog

Fancyapps — easily build overlay windows with carousel

-
Image
  I used to play around with these gallery boxes with old versions. Now the Fancybox is the 4th version with more functions, including plugins, events, options. They even provided how to use React easily demo. I remember when I was learning Javascript, the fancy project is building a carousel, it took some time and logical understanding, but it’s a good way to learn the logic JS though. But for now, I will be grasping the eyeball by this fancy Javascript library. Since it’s a fast-developing world, the result should be precise, accurate, and fast, right? Fanyapps includes  Fancybox, Carousel, and Panzoom . Fancybox is a flex gallery container, which is touch and mobile optimized with swipe, drag, and pinch-to-zoom gestures. Carousel is a display place with smooth animations and more functions inside. Panzoom is a customized zooming function. They combined smoothly and more functionally. Official site Playaround the demo here Step1: import the library with npm or using CDN I like CDN fo
Read more

Meet Mantine: A TS-Based Open-Source React Components Library

-
Image
  Photo by  Kelly Sikkema  on  Unsplash Tailwind? Material? Chakra? You must hear a lot about the different kinds of UI choices for your projects. The better the experience and performance, the more popular it will be. Developers keep building awesome UIs for users who can be more productive and have an improved experience. This is so we can save more time to create new generational masterpieces. In this regard, I found the UI named Mantine which was published in 2021 and which keeps releasing new functions for now. Mantine is a React components library focused on providing a great user and developer experience and that comes with native dark theme support. GitHub - mantinedev/mantine: React components library with native dark theme support React components library with native dark theme support - GitHub - mantinedev/mantine: React components library with… github.com In 2021, the number of users kept increasing. bestofjs bestofjs The UI can work with different frameworks such as Next.j
Read more

Meet Tippy.js: The Complete Tooltip Popover Plugin

-
Image
  Tippy . js  is the complete tooltip, popover, dropdown, and menu solution for the web. Can you play around with tooltips like a pro in one step? Yes, with Tippy.js. Tippy . js  is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper. It provides the logic and optional styling of elements that “pop out” from the flow of the document and float next to a target element. Official site: Tippy.js - Tooltip, Popover, Dropdown, and Menu Library Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper. It provides the… atomiks.github.io Step 1: import npm or CDN # npm npm i tippy.js # Yarn yarn add tippy.js or, <!-- Development --> <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script> <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script> <!-- Production --> <script src="https://unpkg.com/@popperjs/
Read more