Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How to Close Modal Window on Form Submission

Posted on 2014-02-11
10
Medium Priority
?
939 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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1500 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 54

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

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 54

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

782 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