, ,

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 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 …

s3Slider jQuery Plugin & Tutorial

The s3Slider jQuery plugin is made by example of jd`s smooth slide show script. Usage: HTML: Sample …

jQuery Optimization: Avoid Unnecessary Selector

Common subexpression elimination is a common way to optimize any programming code. Doing unnecessary…

Fading Links Using jQuery: dwFadingLinks

Earlier this month, we posted a MooTools script that faded links to and from a color during the mous…