Solved

How to Close Modal Window on Form Submission

Posted on 2014-02-11
10
861 Views
Last Modified: 2014-02-12
Hey Everyone,

What I'm trying to accomplish is create an access barrier to viewing a website. The client wants to collect a potential customer's email address before they can view the website. Basically an email submission via modal window form and on successful form submission, the modal window closes. We are using zen cart. Any ideas on the best way to go about this would be very appreciated.

Thanks!
0
Comment
Question by:merchantweb
  • 5
  • 4
10 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39852189
They do realise that will likely turn off any future customers and forcing people to sign up to a newsletter to view a site smells of spam.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39852216
I agree, the problem with asking for an email is it could be just mixed up words or spam.  

The proper way to do this is to force people to log in even if it is just their email.  Otherwise, do I have to give you my email each time I come to your site?  

You would collect the email, then send me an email to verify it was really me.  The email will have a special link that when clicked will hit the db and mark me verified.  After verification, you can drop a cookie that I am verified and each time I come to the site check for the cookie.

Once you get my verification, then you need to send one last verification thanking me and if it was not me, to click some other link to be removed.  aka double opt in.

You would use server side code (php) to detect the cookie.  If there is not a cookie or not a cookie that matches your db as either verified or opted out (is it ok people opt out to view the site) then you an show them the site.  Otherwise take them to a log in page or a modal.

The problem with this is it also means your site will not be crawled.

There are plenty of modals out.  https://jqueryui.com/dialog/ is one.
Open
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>
 
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
 
 
</body>
</html>

Open in new window

Then to close you would use
 $( "#dialog" ).dialog( "close" );

Open in new window

0
 
LVL 1

Author Comment

by:merchantweb
ID: 39852565
Thank you Scott. That is along the lines of what I was imagining would need to be done, but I know I still need to put it all together. I understand how this kind of feature can be a turn off. I usually would give the user that ability to close a window like this, but it is what the client wants for his site. There is a modal dialog plugin for wordpress that handles it nicely including the cookies to keep it from appearing all the time, but unfortunately the client is using zen cart and not woocommerce.
0
 
LVL 1

Author Comment

by:merchantweb
ID: 39852693
Please see my test site (notice modal window link at top of header): http://joeymerchant.com/1fastdeal/

I have been messing around with the reveal modal window by Zurb here: http://zurb.com/playground/reveal-modal-plugin

I am having trouble getting it to load on page load though. Any ideas?

I'm using the instruction here: http://stackoverflow.com/questions/13352658/reveal-modal-with-cookie-to-display-only-once

This way it will load on page load and I can control the cookies but I'm just having trouble implementing
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39852697
I am not familiar enough with zencart to give instructions to roll your own security.  I found some plug ins that are meant to password protect a category, but just password protect all or some? http://www.zen-cart.com/downloads.php?do=file&id=1600
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 1

Author Comment

by:merchantweb
ID: 39852714
Not sure what my question has to do with password protection? I'm just trying to open the modal window on page load. simple as that.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39852745
>Not sure what my question has to do with password protection?

You said, "I'm trying to accomplish is create an access barrier to viewing a website."

To me that means a password.    If you don't mind people clicking away if they don't enter their address, then just invoke the modal.  And close it after they submit their email to you using the close method.
0
 
LVL 1

Author Comment

by:merchantweb
ID: 39853506
and the next line explains what I mean "The client wants to collect a potential customer's email address before they can view the website. " I understand how you could have assumed that though if you don't read the rest. anyway the answer I was looking for is this:

<a style="display:none" class="popupReveal" href="#" data-reveal-id="myModal">Click Me For A Modal</a>

<div id="myModal" class="reveal-modal">
     <h1>Modal Title</h1>
     <p>Any content could go in here.</p>
     <a class="close-reveal-modal">&#215;</a>
</div>

<script type="text/javascript">


$(function() {
    if ( localStorage.getItem('seen') != (new Date()).getDate()) {
        setTimeout(showpanel, 1000);
    }
});


function showpanel() {
    $('.reveal-modal').reveal({
        animation: 'fade',
        animationspeed: 400
    });

    localStorage.setItem('seen', (new Date()).getDate());
}

</script>

Open in new window


I will look into using cookies as well and I'm trying to get the client to allow customers to close the window without requiring successful form submission. Thanks!
0
 
LVL 1

Author Closing Comment

by:merchantweb
ID: 39853516
provided good guidance.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39853852
Javascript/jquery is client side scripting. You don't have control over the user turning js on or off.  If you don't do this server side, I can easily bypass what you are trying to do.  If all you want to do is create a minor annoyance, then this would work as many people may not think about turning off js then refreshing the screen.  

If a client is telling me they want registration by collecting an email before viewing their products, the only way to ensure that is by using serverside code.  If you just want to use a single username as the password that is the email address, you would check serverside if somebody is logged in. If not, generate the client side modal based on bad serverside information.  Once the person enters in an email to the modal (which is on a blank page or page without the content you want to prevent people from seeing) you can then use ajax to hit a serverside page or post the form directly.
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

746 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now