ajax - 如何构建一个在将内容保留在背景中的上方打开的侧边按钮

Question

我想制作一个按钮，就像http://www.snappages.com/一样，其中帮助按钮位于右侧，单击新框打开，将内容留在后面。如何从头开始执行此操作。

Answer 1

要将按钮放置在右侧：

使用 css 固定定位，right 为 0

创建叠加层

制作如下元素：

<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');
  });