Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to Close Modal Window on Form Submission

Posted on 2014-02-11
10
Medium Priority
?
932 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 53

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 53

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 53

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 53

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

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This video teaches users how to migrate an existing Wordpress website to a new domain.
Suggested Courses

715 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