Fullscreen Confirm Dialog Plugin with jQuery - confirmDialog

File Size: 4.75 KB
Views Total: 5384
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Fullscreen Confirm Dialog Plugin with jQuery - confirmDialog

Just another jQuery alternative to the default JavaScript popup box that helps you create a fully customizable confirmation dialog box sliding out from the top of your screen when triggered.

How to use it:

1. Add references to jQuery library and the jQuery confirmDialog plugin's JavaScript & CSS files to the webpages.

<link href="confirmDialog.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="confirmDialog.jquery.min.js"></script>

2. Config the confirm dialog using the following options.

$.createDialog({

  // trigger element
  attachAfter: '#trigger',

  // dialog title
  title: 'Are you sure you want to continue?',

  // text for confirm button
  accept: 'Yes',

  // text for cancel button
  refuse: 'Cancel',

  // button styles
  acceptStyle: 'red',
  refuseStyle: 'gray'
  
});

3. Display the confirm dialog on the screen.

$.showDialog();

4. Do some cool stuff after the visitors click on the confirm button.

function alertCall(){
  alert('Just did something dangerous!');
}

$.createDialog({

  // options here

  acceptAction: alertCall

});

$.showDialog();

Change log:

2018-06-08

  • fixed z-index issue

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