このスライドアップパネルをより効果的に行う方法は？

Question

私はスライドアップのログイン/ボックスを作成しました。私はそれを行うよりスマートな方法があると思っています。私が持っている問題は、ボックスが現れたときにボディに垂直スクロールバーがスローされることです。これは明らかに期待されていますが、オーバーフローを起こすのには不足しています。体に隠れていますが、どうすればよりきれいに行うことができますか？

FIDDLE：https://jsfiddle.net/43dog4fw/

// show logout box  
$('.user').click(function() { 
    $('.logout-box') 
     .show() 
     .animate({ 
      marginBottom: "0" 
     }, 200, 'swing'); 
}); 

// Close logout box 
$('.close-bar').click(function() { 
    $('.logout-box').animate({ 
     marginBottom: "-=380px" 
    }, 200, 'swing', function() { 
     $('.logout-box').hide(); 
    }); 
}); 

Answer 1

代わりの下マージンをアニメーション化する、割合の一番下のプロパティをアニメーション化。このようにして、モーダルの高さは重要ではありません。

JS

$('.user').click(function() { 
    $('.logout-box') 
     .show() 
     .animate({ 
      bottom: "0%" 
     }, 200, 'swing'); 
}); 

// Close logout box 
$('.close-bar').click(function() { 
    $('.logout-box').animate({ 
     bottom: "-100%" 
    }, 200, 'swing', function() { 
     $('.logout-box').hide(); 
    }); 
}); 

CSS

.logout-box { 
    position: fixed; 
    background: gray; 
    display: none; 
    left: 0; 
    bottom: -100%; 
    height: 380px; 
    margin-bottom: 0; 
    width: 100%; 
    background: #000000; 
} 

あなたのモーダルはいつもあなたがfixed代わりのabsoluteに位置を変更することができ、画面の下から上に来た場合、これも取得しますスクロールバーを取り除く。代わりに、マージンの

Example Fiddle

Answer 2

使用の高さは、アニメーション化します。

あなたはCSS transitionを使用して、このよう .visibleクラスを切り替えることができます

// show logout box 
$('.user').click(function() { 
    $('.logout-box') 
    .show() 
    .animate({ 
    height: "380px" 
    }, 200, 'swing'); 
}); 
// Close logout box 
$('.close-bar').click(function() { 
    $('.logout-box').animate({ 
    height: 0 
    }, 200, 'swing', function() { 
    $('.logout-box').hide(); 
    }); 
}); 

DEMO

Answer 3

：

代わりにアニメーション化する余裕のFiddle

body { overflow:hidden } 
.logout-box { 
    position: absolute; 
    background: gray; 
    left: 0; 
    bottom: 0; 
    height: 380px; 
    margin-bottom: -380px; 
    width: 100%; 
    background: #000000; 
    opacity:0; 
    transition:all 150ms ease-in-out; 
} 

.visible { 
    margin-bottom:0; 
    opacity:1; 
}