Javascript confirm with jquery

jQuery Confirm

1. Use of jQuery .$alert to Ensure Confirmation
2. Use of jQuery $.dialog to Ensure Confirmation
3. Use of jQuery $.confirm to Verify Confirmation

In jQuery, the confirm plug-in comprises a function similar to the JavaScript confirm function. But the basic distinctive characteristic is that the jQuery $.confirm has some properties (including OK and Cancel buttons) which can be altered as a preference, while the JavaScript confirm is rigid, and the minimal buttons cannot be changed.

So, in other words, jQuery does get the spotlight for being more flexible. The task of confirming can be implemented by JavaScript, jQuery confirm plug-in and jQuery dialog UI.

We will only focus on the solution based on the jQuery confirm plug-in.

To enable the plug-in on your local PC, you can depend on the CDNs, or you might install the package via npm . This portal can be a proper user guide for you.

In our example sets, we will use the CDNs for versatile use cases and examination.

Use of jQuery .$alert to Ensure Confirmation

According to basic differentiation between alert , dialog , and confirm actions, the alert comes with one single button, OK . In contrast, the dialog previews a basic modal with customized content and title values.

So, let’s visualize the alert type confirmation.

 html> head>  meta charset="utf-8">  meta name="viewport" content="width=device-width">  script  src="https://code.jquery.com/jquery-3.6.0.min.js"  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous">script>  script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js">script>  link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">  title>confirmtitle>  script>  $(function()  $('#btn').click(function(e)  e.preventDefault();  $.alert(  title: 'Alert!',  content: 'Simple alert!'  >);  >);  >);  script>  head>  body>  button id="btn">Clickbutton>  body>  html> 

Use of jQuery $.dialog to Ensure Confirmation

We will see the basic template of the dialog action and alter the title and content of it. As dialog does not have any buttons, all it does is show a message of preference.

It has a cross ( x ) button in the upper-right corner to return to the main contents.

 html> head>  meta charset="utf-8">  meta name="viewport" content="width=device-width">  script  src="https://code.jquery.com/jquery-3.6.0.min.js"  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous">script>  script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js">script>  link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">  title>confirmtitle>  script>  $(function()  $('#btn').click(function(e)  e.preventDefault();  $.dialog(  title: 'Dialog!',  content: 'Simple dialog!'  >);  >);  >);  script>  head>  body>  button id="btn">Clickbutton>  body>  html> 

Use of jQuery $.confirm to Verify Confirmation

In this regard, we will have two button options. By default, for every confirm action, the texts are OK and Cancel .

However, here we have the privilege to alter these texts. Also, some other parameters can be manipulated.

The link in the introduction can let you through the latest list. Let’s check our example for a better view of the task.

 html> head>  meta charset="utf-8">  meta name="viewport" content="width=device-width">  script  src="https://code.jquery.com/jquery-3.6.0.min.js"  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous">script>  script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js">script>  link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">  title>confirmtitle>  script>  $(function()  var ask = true;  $('#btn').click(function(e)  if(ask)  e.preventDefault();  $.confirm(  title: "Delete",  content: "You sure?",  buttons:   confirm:   text: "Yes",  action: function()  ask = false;  alert("Deleted.");  >  >,  cancel:   text: "No"  >  >  >);  >  >);  >);  script>  head> body>  button id="btn">Clickbutton>  body>  html> 

One fact to focus is, all the functions $.alert() , $.confirm() , and $.dialog() are part of the jconfirm() function. All of them are interchangeably used based on the use case.

Also, we have used the CDNs for jQuery minified js , jquery-confirm minified js , and jquery-confirm minified css . Make sure to check on the versions and later updates while taking the examples as references.

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

A multipurpose plugin for alert, confirm & dialog, with extended features.

License

craftpip/jquery-confirm

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

alerts, confirms and dialogs in one.

A multipurpose plugin for alert, confirm & dialog, with Super powers.

• 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

Download the latest release here and use the files within dist folder.

via Bower:
$ bower install craftpip/jquery-confirm

via NPM:
$ npm install jquery-confirm

$.confirm( title: 'What is up?', content: 'Here goes a little content', type: 'green', buttons:  ok:  text: "ok!", btnClass: 'btn-primary', keys: ['enter'], action: function() console.log('the user clicked confirm'); > >, cancel: function() console.log('the user clicked cancel'); > > >);

See Detailed Docs + Example here.

Please post issues and feature request here Github issues

Checkout the documentation for further information.

• Safari height bug fix. PR by lanre-ade
• Fix isClosed bug for firefox. PR by loganm
• Remove scroll to top when content height changes. PR by amikot
• added support for AMD and commonJS

• Moved overflow scroll inside modal #286
• Improved draggable
• Added ‘animateFromElement’ method
• Added ‘smoothScroll’ option
• Added ‘hilight’ option
• Added ‘showLoading’,’hideLoading’ option
• Accept jquery dom element in content #313
• Updated docs
• ‘setDialogCenter’ method deprecated, dialog centered with CSS tables
• ‘alignMiddle’ method deprecated
• fixes #255#307290

• Added lazyOpen option
• Added button properties isHidden and isDisabled
• setBoxWidth method added

• Support for bootstrap v4
• Draggable dialogs
• Added options animateScrollToElement, alignMiddle, offsetTop, offsetBottom and drawWindowGap

• Setting defaults fixed
• added docs for prompt dialog
• added setType method
• users can now create custom type styles
• removed the annoying debug console log
• other fixes

• Removed bootstrap as dependency
• Added dialog type to identify success, failure, etc.
• Animate scroll to previous focused element
• titleClass option added

(New in 3.0.0) no backwards compatible with v2.

• Define multiple buttons
• Define keyboard keys for individual buttons
• Added setContentPrepend, setContentAppend for control over content.
• Added functions to enable, disable, show, hide, and more for buttons.
• Added aliases for columnClass
• Added bgOpacity
• Added containerFluid
• Added backgroundDismiss animations
• Added callbacks, onContentReady, onOpenBefore, onDestroy
• Docs added for custom animations and themes
• Animation fixes when loading via Ajax
• Restructured code
• Bind button to closeIcon event
• Bind button to backgroundDismiss event
• Now created and destroyed instances can be reopened.
• Bug fixes

• Added closeIconClass
• Added this.$target
• Changed modal template
• Watches modal for new changes auto set to center
• New documentation
• Added new theme ‘material’ and ‘bootstrap’
• Removed themes ‘holodark’ and ‘hololight’
• Improved performance

• Added closeAnimation
• Added $(‘a’).confirm() to emulate confirm();
• Smoother animations
• Changed backgroundDismiss animation
• Updated documentations

• Fix show and hide for closeIcon
• Improved animations, more CSS
• setContent method improved.
• setTitle method added.

• Option for custom width added (using bootstrap grid)
• Text overflow logic changed, #13
• Documentation & improvements to contentLoaded callback.

• Theme ‘supervan’ added
• Load via URL advanced added. now get control over your ajax calls & callbacks.
• methods setContent, isClosed added
• Improved documentation

• Bounce Animation added (kind of elastic).
• Hide title if false.
• Keyboard action, SPACE key added to trigger confirm function.
• Background now has fade animation (open & close).
• Keep a record of opened, closed, currentlyOpened dialogs jconfirm.record .
• Tweaks.

• Keyboard support to control modal. (ENTER and ESC).
• Control over the dialog via this .
• Updated DOCUMENTATION.
• Code optimized.

• $.dialog alias added.
• Refined animations.
• Removed Blur animation (was buggy).
• Animation speed fixed.
• Ajax-content loading now waits and disabled buttons until loaded.
• Modal center justified on screen.
• Added close icon if buttons are disabled (dialog mode).
• Disabled window scroll on modal open.
• Fixed bugs.

Copyright (C) 2014-2017 jquery-confirm

About

A multipurpose plugin for alert, confirm & dialog, with extended features.

Источник