CODEWITHSUNDEEP
javascriptjqueryhtmllightbox
elideli
elideli

Reputation: 179

How can I prevent the Lightbox_me script from removing the browser scroll bar?

I'm using lightbox_me script which is based on jQuery. When you click on a element that opens the lightbox, the script removes the browser scrollbar and make the content shift to the right which I found very ugly. It looks buggy.

I've have setup a clean demo which can be found here : http://lyesdehili.com/LightBox.html

How can I stop it removing the scrollbar?

$(function () {
 function launch() {
    $('#sign_up').lightbox_me({
        centered: true,
        onLoad: function () {
            $('#sign_up').find('input:first').focus()
        }
    });
}

$('#try-1').click(function (e) {
    $("#sign_up").lightbox_me({
        centered: true,
        preventScroll: true,
        onLoad: function () {
            $("#sign_up").find("input:first").focus();
        }
    });

    e.preventDefault();
});


$('table tr:nth-child(even)').addClass('stripe');
});


<div style="width:965px; height:1400px; background:#fff">
<p>Scroll down the page to find the  lightbox link</p>
</div>

<a class="try sprited" id="try-1" href="#">Click to open lightbox</a>

<div style="display:none; height:350px; width:400px; background:#ccc;" id="sign_up">
<h3 id="see_id" class="sprited" >Can I see some ID?</h3>
<span>Please sign in using the form below</span>
<div id="sign_up_form">
    <label><strong>Username:</strong> <input class="sprited"/></label>
    <label><strong>Password:</strong> <input class="sprited"/></label>
    <div id="actions">
        <a class="close form_button sprited" id="cancel" href="#">Cancel</a>
        <a class="form_button sprited" id="log_in" href="#">Sign in</a>
    </div>
</div>
<h3 id="left_out" class="sprited">Feeling left out?</h3>
<span>Don't be sad, just <a href="#">click here</a> to sign up!</span>
<a id="close_x" class="close sprited" href="#">close</a>
 </div>

Upvotes: 2

Views: 391

Answers (1)

Dave Lunny
Dave Lunny

Reputation: 770

The Lightbox script adds overflow: hidden to the <body> element.

Adding body { overflow: scroll !important; } to your CSS should solve this.

UPDATE:

If you wanna just add it right into your script, it would be added to the lightbox function:

$("#sign_up").lightbox_me({ centered: true, preventScroll: true, onLoad: function () { $("#sign_up").find("input:first").focus(); $('body').style('overflow', 'scroll', 'important'); } });

Upvotes: 1

Related Questions