1

I already can implemented the magnific popup and works perfectly.

But now, I want to use it more. Lets say I have a button and show the first popup. Here is the picture:

here is the first popup, I already added <code>closeOnBgClick::false</code> to prevent the popup close.

Lets say I choose "I don't know my password", it must show the second pop up. Here is the picture:

I have to input my email so the system can send the password to my email

If I choose back, I can back to the first popup. If I choose send, it will show the last popup. Here is the picture.

no caption

All I done so far is call the first popup, using AJAX. At the troublesignin.php I also do the same. The result is not showing the popup like I want, but redirect to the URL.

<script src="js/jquery.magnific-popup.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {

            $('.simple-ajax-popup').magnificPopup({
                type: 'ajax',
                closeOnBgClick:false
            });

        });
    </script>
<a href="troublesignin.php" class="trouble simple-ajax-popup">TROUBLE SIGNING IN?</a>

Any clue or solution? Thanks.

Update: This is the main screen.

demonstration

Dylan Wheeler
  • 6,928
  • 14
  • 56
  • 80
Alfred Angkasa
  • 1,381
  • 3
  • 17
  • 35
  • You may want to think twice before using a modal popup. It is not recommended for mobile devices and there are many better ways to do it. Please read http://uxmovement.com/mobile/why-you-should-avoid-using-modal-windows-on-mobile/ – www139 Dec 24 '15 at 04:02
  • @www139, can you give me the others way to do it? – Alfred Angkasa Dec 24 '15 at 04:16
  • Could your provide a screen shot with your current interface (if possible). One suggestion would be that after you click the "sign in" button, the form slides down below it. Perhaps make a full-screen sign in? This is where the imagination is helpful :) – www139 Dec 24 '15 at 04:25
  • @www139 updated the question. I already can popup the second windows using inline call. but still questioning how to validate the email. how do i check if the email is blank or not. – Alfred Angkasa Dec 24 '15 at 04:30
  • You will need regular expressions to do this. Try using this; http://stackoverflow.com/a/46181/3011082 and additionally use an if statement to check to see if it is empty like this `if(email != ''){/*email is not empty*/}`. Be sure to also validate on the server. PHP has built in methods for validating email without regular expressions which is very helpful. I can provide you with more links if you would like :) – www139 Dec 24 '15 at 04:33
  • @www139 sure.. thanks for your help. you can provide me more link.. :) – Alfred Angkasa Dec 24 '15 at 04:45
  • http://www.w3schools.com/php/filter_validate_email.asp for PHP validation of email (uses no regex) here is an entire list of PHP filters that will save you a ton of server-side regex. Always validate on the server in addition. People can edit the source code and remove your javascript validation. – www139 Dec 24 '15 at 04:51

0 Answers0