实现效果：点击界面某个按钮时候，弹出输入框，锁定背景的效果

实现效果：点击界面某个按钮时候，弹出输入框，锁定背景的效果

/*CSS的样式*/

    首先：设置父元素hidden。不显示，只有当按钮点击时候去除hidden

    其次：

        1:设置背景层

            opacity半透明

            界面完全覆盖全屏：一种方法是css属性display设置absolute。相对于body设置width100%，height100%，top0，left0等等。另一种方法是js抓取显示器宽度高度，再设置给背景层

        2：输入层

            输入层不能是背景层的子元素,而应该是并列的。因为如果是背景层子元素的话。仍会集成透明的样式。所以要和背景层是并列元素。设置方式和步骤1一样的,不设置opacity或者opacity1。调整下居中问题就行。

/*CSS样式完毕*/

/*JS*/

1：点击按钮时候去hidden
2：overflow:hidden,去除滚动条;

以下是代码部分。这里的tech-popup 是body的直接子元素。所以tech-popup-bg设置absolute时候，相对于body了

<div class=" tech-popup hidden">
<div class="tech-popup-bg ">
</div>
<div class="tech-popup-chat">
<form id="tech-fm-chat" name="tech-fm-chat" method="post" action="{:U('Patent/chatHandler')}">
<ul>
<li><span>姓名</span><input type="text" name="to_name"></input></li>
<li><span>性别</span><input type="radio" name="to_gender" value='1'>先生</input><input type="radio" name="to_gender" value='2'>女士</input></li>
<li><span>电话</span><input type="text" name="to_phone"></input></li>
<li><span>邮箱</span><input type="text" name="to_email"></input></li>
<li><span>留言</span><textarea name="content"></textarea></li>
<li><span></span><button type="button"  class="tect-popup-btn" name="btnsubmit">留言</button><button type="button"  class="tect-popup-btn" name="btncancel">取消</button></li>
</ul>
</form>
</div>
</div>

/*弹出留言板*/
.hidden{
display: none;
}
.tech-popup-bg{
position: absolute;
background-color: #333;
opacity: 0.5;
width: 100%;
height:100%;
top:0px;
bottom: 0px;
}
.tech-popup-chat{
position: absolute;
height: 50%;
top:25%;
bottom: 25%;
width:40%;
left:30%;
right: 30%;
background-color: #eeeeee;
}
.tech-popup-chat ul{
list-style: none;
width: 80%;
margin: auto;
padding-top:30px;
}
.tech-popup-chat li{
padding: 10px;
}