2

我需要删除 body 的滚动条并设置适合打开的模态窗口的新值。 http://jsfiddle.net/ChpCK/

怎么做？当然，要删除我需要的身体卷轴$('body').css('overflow', 'hidden')，但是如何$('#signup').css('overflow-y', 'auto')在#signup显示时制作？

如果#signup高度小于浏览器高度，则不得显示滚动条 ( hidden)。

对于模态窗口，我使用精益模态http://leanmodal.finelysliced.com.au/并将其复制到 jsfiddle。

4

1 回答 1

1

您可以添加一些 div 来包装“#lean_overlay”和“#signup” 

$(function() {

// leanModal v1.1 by Ray Stone - http://finelysliced.com.au
// Dual licensed under the MIT and GPL
$.fn.extend({ 
    leanModal: function(options) {
        var defaults = {
            top: 50,
            overlay: 0.6,
            bg: '#000',
            closeButton: null
        };
        var wrap= $("<div class='wrap'></div>");
        var overlay = $("<div id='lean_overlay'></div>");
        $("body").append(wrap);
        wrap.append(overlay);
        options =  $.extend(defaults, options);
        return this.each(function() {
            var o = options;
            $(this).click(function(e) {
                var modal_id = $(this).attr("href");
                $("body").css('overflow', 'hidden');
                wrap.css("display","block");
                $("#lean_overlay").click(function() { 
                     close_modal(modal_id);                    
                });

                $(o.closeButton).click(function() { 
                     close_modal(modal_id);                    
                });
                wrap.append($(modal_id));

                var modal_height = $(modal_id).outerHeight();
                var modal_width = $(modal_id).outerWidth();

                $('#lean_overlay').css({ 'display' : 'block', opacity : 0, background: o.bg });

                $('#lean_overlay').fadeTo(200,o.overlay);

                $(modal_id).css({ 
                    'display' : 'block',
                    'position' : 'absolute',
                    'opacity' : 0,
                    'z-index': 11000,
                    'left' : 50 + '%',
                    'margin-left' : -(modal_width/2) + "px",
                    'top' : o.top + "px"
                });
$('#lean_overlay').height(wrap.height());
                $(modal_id).fadeTo(200,1); overlay.css("height",wrap[0].scrollHeight);
                e.preventDefault(); 
            });
        });

        function close_modal(modal_id){
            wrap.fadeOut(200,function(){
                wrap.css("display","none");
                $(modal_id).css({ 'display' : 'none' });
                $("body").css('overflow', 'auto');
            });

        }
    }
});

css 

.wrap{
position:absolute;
top: 0px;
left: 0px;
width:100%;
height:100%;
display:none;
overflow:auto;
}

http://jsfiddle.net/ChpCK/1/

于 2013-07-10T17:38:16.177 回答