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'm having a site done in wordpress with some 10 pages. I'll need to
On the Wordpress site I'm working on, it lists posts by category, but I
I'm working on a WordPress template and need to add a hyperlink to the
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 that uses a dynamically generated menu system which
I am working on a WordPress site where one of the pages lists excerpts
I'm new to working with video. I would like to put some tiny video
Working with dates in ruby and rails on windows, I'm having problems with pre-epoch
Working with python interactively, it's sometimes necessary to display a result which is some
I'm writing a plugin for my wordpress site and am having trouble understanding the

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.