, ,

jQuery Confirm mailto: A plugin to confirm with users before opening any mailto link.

Confirm with users before opening any link on the page through their default email client.

Download: https://github.com/0xmmo/jquery-confirm-mailto

Demonstration:

Plugin homepage:

Implementation:

Basic Usage:

  • Make sure you have jQuery loaded properly.
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  • Include confirm.min.js or place the plugin code at the top of your javascript file (recommended).
!function(t){t.fn.confirmMailto=function(e){var n=t.extend({message:"Do you want to send an email to $to?",to:"href",callback:function(){},success:function(){},fail:function(){}},e),a=/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi,i=function(e){var i=n.message,c=n.to;if(c="href"==c?t(this).attr("href").match(a):"html"==c?t(this).html():c,i=i.replace("$to",c)==i?i+c:i.replace("$to",c),confirm(i)){n.success();var o=!0}else{e.preventDefault(),n.fail();var o=!1}return setTimeout(function(){n.callback(o)},1),o};return this.filter('[href^="mailto:"]').each(function(){t(this).bind("click",i)}),this}}(jQuery);
  • Call the method on document load.
$(document).ready(function(){
        $('a').confirmMailto();
});

Advanced Usage:

  • You can alternately call the method with the following options.
$('a.advanced').confirmMailto({
        message:        'Are you cool enough to send an email to $to? ',
        to:             'html', // href/html
        success:        function(){
                                $('a.advanced').css('color','#3C3');
                        },
        fail:           function(){
                                $('a.advanced').css('color','#F66');
                        },
        callback:       function(result){
                                if(result){
                                        alert('Thank you!');
                                }else{
                                        alert('Boooo!');
                                }
                        }
}); 

Options:

messageStringDefault : Do you want to send an email $to? – Message to display in the confirmation dialog. $to is the recipient format.
toStringDefault : href – The format of the recipient in the dialog message. ‘href’ : email linked to in href attribute / ‘html’ : inner html of anchor tag.
successFunctionCalled on successful confirmation, before redirection.
failFunctionCalled on failed confirmation.
callbackFunctionCalled after success/fail and after redirection.

Methods:

confirmMailtoFunctionReturns : jQuery object – Main call

Screenshots:

How a Loop Through a JavaScript Object?

How a Loop through a JavaScript object?Javascript Objects are Variables Containing Variables.In Java…

How to Search Item in List in JavaScript

Multi Step Form Using HTML and JavaScript

Form is the important part in web design. Form is the primary interface to the user by which user is…

How to Create Custom CSS, jQuery Autocomplete Plugin

Web developers often use autocomplete features in websites as a part of their work. Yet lot of good …

How to Make Sticky Sidebar Using jQuery and CSS

Sticky sidebar is an essential part of web development. Not in all cases but for some cases where ou…

Selectors, Animation, and AJAX – jQuery Tutorial And Examples

By now I’m sure you have grasped at least the basics and simplicity of the jQuery library. Now it’s …