Displaying A Confirm Dialog When Opening External Links - Redirect Confirm

File Size: 2.88 KB
Views Total: 3652
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Displaying A Confirm Dialog When Opening External Links - Redirect Confirm

Redirect Confirm is a jQuery plugin that displays a confirmation dialog to notify users when they are opening an external links of your website. The plugin uses Bootstrap's modal component for the animated confirm dialog box.

How to use it:

1. Load jQuery library and Bootstrap's CSS and JavaScript files in the html page.

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

2. Make sure you load the jQuery Redirect Confirm after jQuery library.

<script src="redirect.confirm.js"></script>

3. Call the plugin with default option. By default, All the links of your webpage will be affected by the plugin.

jQuery(document.body).RedirectConfirm();

4. Apply the plugin to links within a specified container.

jQuery(document.body).RedirectConfirm({
  selector: "a",
});

5. You can also specify the 'Exculding' links using 'data-rc-exclude' attribute.

jQuery(document.body).RedirectConfirm({
  selector: "a",
  excluding: 'data-rc-exclude'
});

6. Override the 'target' attribute. By default, the links will be opened in a new tab.

jQuery(document.body).RedirectConfirm({
  selector: "a",
  excluding: 'data-rc-exclude',
  targetUrl: '_blank'
});

7. Customize the confirm dialog.

jQuery(document.body).RedirectConfirm({
  selector: "a",
  excluding: 'data-rc-exclude',
  targetUrl: '_blank',
  title: 'Exiting our website',
  message: 'You are now leaving our website. We are not responsible for any external Web sites.',
  returnlbl: 'Return',
  continuelbl: 'Continue',
});

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