0

We have this Fancybox overlay for the login form on an older, legacy site. I didn't build this site, but I'm trying to make sense of it. I added a link to the new "sign up" page where people can register (toward the bottom of the code).

I have checked a number of other threads here on this website that seem like they should relate to this, but I haven't been able to solve my issue by using them yet. Just wanted you all to know that I did at least search before posting.

So far, I've tried:

  • Simple anchor link
  • Anchor with javascript redirect, location, etc

Nothing seems to work. I always get this error:

The requested content cannot be loaded. Please try again later.

Losing my mind with this. Something so simple (linking to another page) shouldn't be this difficult.

Markup for what calls the modal:

<a style="float:right;<?= preg_match("/MSIE 7/",$_SERVER['HTTP_USER_AGENT']) ? 'width:135px;' : '' ?>position:relative;top:-3px;left:8px;" href="#login" class="button modal"><span class="begin"></span>Client Login<span class="end"></span></a>

Markup for the modal:

<div id="login" class="modal">

    <form id="login" method="post" action="http://myposturl/">

        <h3>Enter your user name and password to login:</h3>

        <fieldset class="fields">

            <p><label for="username">Username:</label> <span class="field"><input type="text" id="username" name="username" tabindex="1" class="required" /></span></p>

            <p><label for="password">Password:</label> <span class="field"><input type="password" id="password" name="password" tabindex="2" class="required" /></span></p>

            <div class="clear"></div>

            <p><a class="button" href="#submit" onclick="document.forms['login'].submit();" onkeypress="document.forms['login'].submit();" title="Login"><span class="begin"></span>Login<span class="end"></span></a>

                <a href="javascript:;" class="button" onclick="$.fancybox.close();"><span class="begin"></span>Cancel<span class="end"></span></a></p>

        </fieldset>

    </form>

    <p><a href="http://myregistrationurl/">New User? Register here!</a></p>

</div>

Here's the code that actually calls Fancybox:

<script type="text/javascript">
    $(document).ready(function() {
        $("a[href*=http://]:not('.facebook_link'),a[href*=https://]:not('.facebook_link')").fancybox({
            'transitionIn' : 'fade', 
            'transitionOut' : 'fade', 
            'height' : '100%', 
            'width' : 900, 
            'speedIn' : 300, 
            'speedOut' : 0, 
            'overlayColor' : '#000'
        });         
        $('a.modal').fancybox({
            'transitionIn' : 'fade', 
            'transitionOut' : 'fade', 
            'speedIn' : 300, 
            'speedOut' : 0, 
            'overlayColor' : '#000',
            'titleShow' : false
        });
        $('.cycle').cycle({
            fx: 'fade',
            pause: true
        });
    });
</script>
Will Ashworth
  • 1,058
  • 3
  • 13
  • 28
  • Can you show your javscript that calls fancybox? Are you using the iframe setting? – Barbara Laird Sep 20 '13 at 18:46
  • Just edited the post with new info. Thanks! – Will Ashworth Sep 20 '13 at 18:49
  • Does this help? http://stackoverflow.com/questions/8913583/fancybox-returning-the-requested-content-cannot-be-loaded-please-try-again-lat – Barbara Laird Sep 20 '13 at 18:56
  • Unless I'm mis-reading that other post, it may not. The issue is everything you see above, that *IS* the overlay itself. The link is within the overlay, and that link should go to a completely separate page. Right now, fancybox is trying to treat it like a new overlay link or something. I'm definitely more of a backend/database guy, so this is a little out of my comfort zone to be honest. Hopefully something easy to fix! – Will Ashworth Sep 20 '13 at 19:08
  • The class `modal` should be assigned to the element that triggers fancybox (a link in most cases) BUT not to the element you are targeting with such link ... you are also adding the class `modal` to this ` – JFK Sep 20 '13 at 19:13
  • I've updated the post again, with the markup that TRULY calls the modal. It does indeed have class="modal", but my link *within* the modal, doesn't have that class. Which is why I'd expected it to work properly, but it's producing this error and I'm not sure why. – Will Ashworth Sep 20 '13 at 20:11
  • I took "modal" out of the DIV, but that didn't see to fix and make the link work. – Will Ashworth Sep 20 '13 at 20:44

0 Answers0