Solved

Need to implement mobile-friendly popup email disclaimer on website

Posted on 2013-11-01
6
447 Views
Last Modified: 2013-11-04
I'm currently in the process of converting a client's static HTML website to Wordpress.

On the following page, .. notice that when you click on the email links, a disclaimer message is displayed in a popup window:

http://wordpress.silvermanacampora.com/contact-us/

When you click on the "Agree" button in the popup -- only then is the mailto link fired off.  

How would you recommend that I replicate this functionality in a way that's more mobile-friendly?  A javascript confirm dialog?  A lightbox/shadowbox popup?  Please advise .. and provide code samples if possible.  

Thanks,
- Yvan
0
Comment
Question by:egoselfaxis
  • 4
  • 2
6 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39617066
What you are looking for is a modal.  The pop up currently does not work in chrome browser anyway.  

Using jquery ui modal example from http://jqueryui.com/dialog/#modal I have modified to work with your example
http://jsbin.com/iBiBEda/1/edit?html,js,output
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<meta charset=utf-8 />
<title>padas</title>
</head>
<body>
  <a href="#" class="emailaddress">somebody1@domain.com</a><br>
  <a href="#" class="emailaddress">somebody2@domain.com</a><br>
  <a href="#" class="emailaddress">somebody3@domain.com</a><br>
 
  <div id="dialog-modal" title="Basic modal dialog">
    <div class="mailto"></div>
 
  </div> 
</body>
</html>

Open in new window

$(function() {
  $('.emailaddress').click(function(){
    var mailto_name=$(this).text();
    var mailto_link='<a href="mailto:'+mailto_name+'?Subject=Help%20me" target="_top">'+mailto_name+'</a>';
    $('div.mailto').html(mailto_link);
    $( "#dialog-modal" ).dialog({
      height: 140,
      modal: true
    });
  });
  });

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39617093
1)
$('.emailaddress').click(function(){
This listens for the click on the element that has a class of emailaddress

2)
var mailto_name=$(this).text();
This extracts the the email address from the a link

3)
   var mailto_link='<a href="mailto:'+mailto_name+'?Subject=Help%20me" target="_top">'+mailto_name+'</a>';
Here we create the full mailto link

4)
$('div.mailto').html(mailto_link);
This code places the link we just created into the div with class mailto that is in the body of the modal

5)
$( "#dialog-modal" ).dialog({
      height: 140,
      modal: true
    });

The code above calls the modal to open
0
 

Author Comment

by:egoselfaxis
ID: 39621579
Thanks for your reply.  What you've suggested seems as though it might work well on a mobile device.  However .. I have a couple of questions:

1) Is there any way to accomplish this same type of functionality without having to use the JQuery UI library?   I ask because I'm not too keen on the idea of adding more code bloat to my Wordpress site just to accommodate for these disclaimer popups.  

2) Assuming that I have to use JQUery UI for this .. how would I go about increasing the width of the modal window when the website is being viewed on a device other than a mobile device (ie: desktop PC / IPad, etc) ?  Ideally, I'd like for the modal window to be displayed a bit wider/taller when viewed on larger displays.  

- Yvan
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39621625
I would be surprised that your theme does not already utilize jquery or another library like bootstrap (which has modal's built in).   To answer your question, here is one pure js solution http://jsmodal.com/docs/usage.php

To answer your 2nd question, it would be the same way you adjust for any other object on your page.  If your site is responsive, then you would use media queries.
0
 

Author Comment

by:egoselfaxis
ID: 39621843
I am using JQuery .. but I would prefer to not have to also use JQuery UI .. which is a distinctly separate library (and CSS stylesheet) that adds another 250k to the page.  

Thanks for the Pure JS solution, btw.  I will likely use that.

Cheers!
- Yvan
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39621865
For jquery ui, you don't have to have all of it, you can get just what you need. I am using bootstrap in just about everything I do (or foundation) and I  have been using the modal code built in.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Not allowed to load local recource. 4 34
Alert after MVC form submitted 1 22
Angular won't showing my array result in HTML 3 24
ASP.NET Content Page 3 25
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question