Disclaimer popups before sending an email or submitting a comment using simple jQuery in WordPress

Several of our clients requested that we add popup disclaimers before someone sends an email to the site admin or before they submit a comment. Here’s a screenshot of what we’re going to do:

Case 1: Add a Contact Us link to the navigation menu that triggers a disclaimer popup.  
Once a visitor clicks OK, open the visitor’s email client using the mailto: function.

1. In the WordPress dashboard, go to Appearance > Menus and add a custom link. 
    
2. Go to Screen Options and make sure the “CSS Classes” checbox is checked
3. In the URL field, put mailto:youremail@yoursite.com 
4. In the CSS Class, put show-confirm-popup
5. Open up header.php
6. Check to see if you already have the jQuery library loaded on your site. If not, add the following somewhere between the opening and closing head tags 
   
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

   1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

7. Add the following code between the opening and closing head tag. Make sure to change the text of the disclaimer.
   
   <script type="text/javascript">$(document).ready(function(){ $('.show-confirm-popup a').each(function(){ $(this).click(showConfirmPopup); }); }); function showConfirmPopup(){ var confirmation_text = 'Change this text. By clicking "OK," you agree that you have read and understand this notice.'; return confirm(confirmation_text); } $(function(){ }); </script>

   1

   <script type="text/javascript">$(document).ready(function(){ $('.show-confirm-popup a').each(function(){ $(this).click(showConfirmPopup); }); }); function showConfirmPopup(){ var confirmation_text = 'Change this text. By clicking "OK," you agree that you have read and understand this notice.'; return confirm(confirmation_text); }   $(function(){ }); </script>

  Case 2: Add the popup disclaimer to any link.  

1. Add the following link structure anywhere on your site.
   
   <a onclick="return showConfirmPopup();" href="mailto:youremail@yoursite.com">Contact Us</a>; 

   1	<a onclick="return showConfirmPopup();" href="mailto:youremail@yoursite.com">Contact Us</a>;

2. Copy the code from Step 6 and 7 from Case 1 above into header.php.

Case 3: Add the popup disclaimer before a comment is submitted

1. Open Comments.php
2. Do a search for the word “submit”
3. Add the onClick parameter to the Submit button. It will look something like this:
   
   <input name="submit" type="submit" id="submit" tabindex="5"   value="Submit Comment" onClick="return showConfirmCommentPopup();" />

   1	<input name="submit" type="submit" id="submit" tabindex="5"   value="Submit Comment" onClick="return showConfirmCommentPopup();" />

4. Copy the code from Step 6 and 7 from Case 1 into header.php and also in header.php, add the following function. Remember to change the text.
   
   function showConfirmCommentPopup(){ var confirmation_text = 'Change this text. By clicking "OK," you agree that you have read and understand this notice.'; return confirm(confirmation_text); }

   1	function showConfirmCommentPopup(){ var confirmation_text = 'Change this text. By clicking "OK," you agree that you have read and understand this notice.'; return confirm(confirmation_text); }

    

Big thank you to Elisha!