Member Avatar for Member #941443

So I'm using a lightbox JS program and I'm trying to alter the CSS to fix an issue. The lightbox opens in the middle of the page, no matter what. I'm trying to get it to open over where the link was clicked instead of the middle of the page for every image. I'm much better versed in Js than CSS, so any help would be appreciated. Here is the full code, but I think the only 2 things of importance are mbCenter and mbMedia

#mbOverlay {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 150%;
    background-color: 000000;
    cursor: pointer;
}

        /*  Fixes for older or limited browsers */

#mbOverlay.mbOverlayOpaque {
    background: transparent url(80.png) repeat;
}

#mbOverlay.mbOverlayAbsolute {
    position: absolute;
}

#mbOverlay.mbMobile {
    position: absolute;
    background-color: transparent;
}

#mbBottom.mbMobile {
    line-height: 24px;
    font-size: 16px;
}

        /*  Overlay panel styling   */

#mbCenter {
    position: absolute;
    z-index: 9999;
    left: 50%;
    padding: 10px;
    background-color: #000;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000'); /* For IE 5.5 - 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000')"; /* For IE 8 */
    -webkit-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
    -khtml-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
    -moz-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
    box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
}

#mbCenter.mbLoading {
    background: #000 url(loading-dark.gif) no-repeat center;
        /*  This style is applied only during animation.    */
        /*  For example, the next lines turn off shadows    */
        /*  improving browser performance on slow systems.  */
        /*  To leave shadows on, just remove the following: */
    -webkit-box-shadow: none;
    -khtml-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

#mbMedia {
    position: relative;
    left: 0;
    top: 0;

        /*  Inline content styling  */

    font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    text-align: left;
    background-position: center center;
    background-repeat: no-repeat;
}

        /*  Title, Caption and Button styling   */

#mbBottom {
    line-height: 10px;
    font-size: 12px;
    font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
    text-align: left;
    color: #999;
    min-height: 10px;
    padding: 0 0 6px;
}

#mbTitle, #mbPrevLink, #mbNextLink, #mbCloseLink {
    display: inline;
    color: #fff;
    font-weight: bold;
}

#mbNumber {
    display: inline;
    color: #999;
/*  line-height: 0.8em; */
    font-size: 0.8em;
    margin: auto 10px;
}

#mbCaption {
    display: block;
    color: #999;
    line-height: 1.6em;
    font-size: 0.8em;
}

#mbPrevLink, #mbNextLink, #mbCloseLink {
    float: right;
    outline: none;
    margin: 0 0 0 10px;
    font-weight: normal;
}

#mbPrevLink b, #mbNextLink b, #mbCloseLink b {
    color: #eee;
    font-weight: bold;
    text-decoration: underline;
}

#mbPrevLink big, #mbNextLink big, #mbCloseLink big {
    color: #eee;
    font-size: 1.4em;
/*  line-height: 0.9em;*/
    font-weight: bold;
}

#mbBottom a, #mbBottom a:link, #mbBottom a:visited {    /* Thanks to Danny Jung for feedback and corrections */
    text-decoration: none;
    color: #ddd;
}

#mbBottom a:hover, #mbBottom a:active {
    text-decoration: underline;
    color: #fff;
}

        /*  Error message styling   */

#mbError {
    position: relative;
    font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    border: 10px solid #700;
    padding: 10px 10px 10px;
    margin: 20px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#mbError a, #mbError a:link, #mbError a:visited, #mbError a:hover, #mbError a:active {
    color: #d00;
    font-weight: bold;
    text-decoration: underline;
}
  • 1 Contributor
  • 2 Replies
  • 277 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by Member #941443

Dani AI

Generated

— good diagnosis. The behavior you saw (lightbox always centering) is usually a combination of two things: the plugin/CSS forces a center (your #mbCenter { left: 50% }), and the lightbox code expects to run in the top-level document (so it positions relative to the full page). When the page is served inside an iframe you often either (a) can only position inside the iframe viewport, or (b) the plugin tries to access the parent/top DOM and fails (or is blocked by cross-origin rules).

Two practical paths depending on what you can change:

  1. Keep everything inside the iframe (no parent access)
  • Let the lightbox open, then override its centering and set left/top from the click coordinates. Example: capture the click, wait for the plugin to create #mbCenter, then compute coordinates and set inline styles so it appears where the user clicked.
document.addEventListener('click', function(e){
  if (!e.target.matches('.your-lightbox-link')) return;
  setTimeout(function(){
    var lb = document.getElementById('mbCenter');
    if (!lb) return;
    lb.style.marginLeft = '0';
    var w = lb.offsetWidth, h = lb.offsetHeight;
    var x = e.clientX - w/2;
    var y = e.clientY - h/2 + window.pageYOffset;
    lb.style.left = x + 'px';
    lb.style.top  = y + 'px';
  }, 8);
});
  1. If you can modify the parent (or request it from the host)
  • Use postMessage to send the clicked element’s coords/src to the parent. The parent creates the overlay (or re-positions it) using those values. This avoids cross-origin DOM access but requires a listener in the parent and a secure origin check.

Troubleshooting checklist

  • Verify same-origin (if cross-origin you cannot access parent DOM).
  • Remove/override the plugin’s left:50% centering (via JS or a class) before setting explicit left/top.
  • Test the plugin out of the iframe to confirm expected behavior, then implement one of the two above approaches.

If neither option is possible because the host forbids parent changes, the only realistic solution is to adapt the lightbox to operate entirely inside the iframe and reposition it with the click-based approach above.

Member Avatar for Member #941443

I feel like background-position: center center; is the cause, but I'm not sure what to do with this info

Edit* Nevermind, I don't think background controls the placement.

Edited by Member #941443
Member Avatar for Member #941443

Nevermind I found out why...I'm stuck with only being able to use html via iframe on host, and this depends on not being in an iframe, so it just doesn't work...great.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.