Sign Up

Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.

Have an account? Sign In

Have an account? Sign In Now

Sign In

Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.

Sign Up Here

Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Have an account? Sign In Now

You must login to ask a question.

Forgot Password?

Need An Account, Sign Up Here

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Sign InSign Up

The Archive Base

The Archive Base Logo The Archive Base Logo

The Archive Base Navigation

  • SEARCH
  • Home
  • About Us
  • Blog
  • Contact Us
Search
Ask A Question

Mobile menu

Close
Ask a Question
  • Home
  • Add group
  • Groups page
  • Feed
  • User Profile
  • Communities
  • Questions
    • New Questions
    • Trending Questions
    • Must read Questions
    • Hot Questions
  • Polls
  • Tags
  • Badges
  • Buy Points
  • Users
  • Help
  • Buy Theme
  • SEARCH
Home/ Questions/Q 4073366
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Editorial Team
Asked: May 20, 20262026-05-20T17:00:38+00:00 2026-05-20T17:00:38+00:00

I am working on a wordpress site and I need some overlay windows. They

  • 0

I am working on a wordpress site and I need some overlay windows. They pop up fine when I am working locally but for some reason when I put my changes on the live server the window will not pop up. Anyone know why this is?

The word “Aristokraft” in the sidebar of this page should trigger the window: http://friendlumber.com.s111208.gridserver.com/kitchens-and-baths/kitchens/cabinets

–html–

<div id="popup_name" class="popup_block">
    <div id="image"><img src="img/doorbig.jpg" border="0"/></div> 
        <div id="gallery-shell">
        <a href="#" rel="img/doorbig.jpg" class="image"><img src="img/doorthumb.jpg" class="thumb" border="0"/></a> 
        <a href="#" rel="img/doorbig.jpg" class="image"><img src="img/doorthumb.jpg" class="thumb" border="0"/></a> 
        <a href="#" rel="img/doorbig.jpg" class="image"><img src="img/doorthumb.jpg" class="thumb" border="0"/></a>
        </div>
</div>

–trigger html–

<li><a href="#?w=500" rel="popup_name" class="poplight">Aristokraft</a></li>

–script–

$(document).ready(function() {
    //Code goes here



    //When you click on a link with class of poplight and the href starts with a # 
$('a.poplight[href^=#]').click(function() {
    var popID = $(this).attr('rel'); //Get Popup Name
    var popURL = $(this).attr('href'); //Get Popup href to define size

    //Pull Query & Variables from href URL
    var query= popURL.split('?');
    var dim= query[1].split('&');
    var popWidth = dim[0].split('=')[1]; //Gets the first query string value

    //Fade in the Popup and add close button
    $('#' + popID).fadeIn().css({ 'width': Number( 900 ) }).prepend('<a href="#" class="close"><img src="img/cancel.png" class="btn_close" title="Close Window" alt="Close" /></a>');

    //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;

    //Apply Margin to Popup
    $('#' + popID).css({
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    //Fade in Background
    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 

    return false;
});

//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  //fade them both out
    });
    return false;
});




});
  • 1 1 Answer
  • 0 Views
  • 0 Followers
  • 0
Share
  • Facebook
  • Report

Leave an answer
Cancel reply

You must login to add an answer.

Forgot Password?

Need An Account, Sign Up Here

1 Answer

  • Voted
  • Oldest
  • Recent
  • Random
  1. Editorial Team
    Editorial Team
    2026-05-20T17:00:39+00:00Added an answer on May 20, 2026 at 5:00 pm
    $('a.poplight').click(function()
    

    Change your selecter like this and try it

    • 0
    • Reply
    • Share
      Share
      • Share on Facebook
      • Share on Twitter
      • Share on LinkedIn
      • Share on WhatsApp
      • Report

Sidebar

Related Questions

I have a wordpress site that i've been working on that has some pages
On the Wordpress site I'm working on, it lists posts by category, but I
I'm working on fixing a wordpress site that's very slow. I need a way
I am working on a Wordpress site that uses an e-commerce engine for some
I'm having a site done in wordpress with some 10 pages. I'll need to
I am working on a WordPress site where one of the pages lists excerpts
I'm working on a wordpress site, with a blog post that ends like: http://www.blog.com/?p=2
i'm working on a wordpress site using buddypress. So, i'm making a page where
I'm working on a WordPress that will allow the site administrator to switch between
I am working on a charity site and was tasked with moving a WordPress

Explore

  • Home
  • Add group
  • Groups page
  • Communities
  • Questions
    • New Questions
    • Trending Questions
    • Must read Questions
    • Hot Questions
  • Polls
  • Tags
  • Badges
  • Users
  • Help
  • SEARCH

Footer

© 2021 The Archive Base. All Rights Reserved
With Love by The Archive Base

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.