ajax - コンテンツをバックグラウンドに残して上に開くサイドボタンを作成する方法

Question

http://www.snappages.com/のように、右側にヘルプボタンがあり、ワンクリックで新しいボックスが開いてコンテンツが残るボタンを作成したいと思います。これを最初から行う方法。

Answer 1

ボタンを右に配置するには:

右を 0 として CSS 固定配置を使用する

オーバーレイを作成するには

次のような要素を作成します。

<div id="overlay">
<div id="help">
</div>
</div> 

CSSで：

#overlay{
position:fixed;
display:none;
top:0;
left:0;
width:100%;
height:100%;
background:rgb(255,255,255);
background:rgba(255,255,255,.5);
}

オーバーレイ内で、実際のヘルプフォームを絶対位置にして中央に配置します

#help{
position:absolute;
left:50%;
width:300px;
margin-left:-150px;
top:100px;
}

そして、ヘルプボタンをクリックすると

$('#help-button').on('click',function(){
  $('#overlay').fadeIn('fast');
  });