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

最新推荐文章于 2021-08-17 09:12:46 发布

mangrandi

最新推荐文章于 2021-08-17 09:12:46 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/mangrandi/article/details/51821106

本文介绍了一种通过CSS和JavaScript实现的界面效果，当点击按钮时会弹出输入框并锁定背景。具体包括设置背景层为半透明、全屏覆盖及输入层的设计方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

/*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;
}