javascript - 如何为所有屏幕尺寸右对齐滑出面板？

Question

我正在尝试右对齐面板，以便它可以与 Bootstrap 一起使用，因此它适用于所有屏幕尺寸。左对齐适用于所有屏幕尺寸。我怎样才能使它正确对齐？

FIDDLE

Javascript

 $('#opener').on('click', function() {                          
                                var panel = $('#slide-panel');
                                if (panel.hasClass("visible")) {
                                                panel.removeClass('visible').animate({'margin-left':'100%'});
                                } else {
                                                panel.addClass('visible').animate({'margin-left':'90%'});
                                }             
                                return false;      
                });

CSS

#slide-panel {
    width:300px;
    height:300px;
    padding:10px;
    background:#eee;
    margin-left:100%;
}
#opener {
    float:left;
    margin:-10px -50px 0px -50px;
    border-radius:0;
}

HTML

<div id="slide-panel">
    <a href="#" class="btn btn-danger" id="opener"><i class="glyphicon glyphicon-align-justify"></i></a>
    Panel Content
</div>

Answer 1

制作侧板可以通过以下步骤完成:

• 使面板position: absolute 或position: fixed
• 使面板为top: 0 和right: -N，其中 N 是面板的宽度
• 要显示面板，请将 right 设置为 0
• 要使其没有滚动条，请在正文和 html 上设置 overflow-x: hidden

这仅在侧面板的宽度恒定时有效。

这是 fiddle :http://jsfiddle.net/acbabis/ZnNHk/