jquery 从底部弹出

在网页开发中，常常会需要一些特殊的效果来吸引用户。其中，从底部弹出是一种比较实用的效果，可以用来展示一些提示信息或者弹出选择框等。在jQuery库中，我们可以很轻松地实现这一效果。

首先，我们需要在页面中引入jQuery库。在head标签中添加如下代码：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

然后，我们需要编写CSS样式来控制弹出框的位置和样式。

.popup {
  position: fixed;
  width: 300px;
  height: 200px;
  bottom: -200px;
  left: 50%;
  margin-left: -150px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease-out;
}
.popup.show {
  bottom: 50px;
}

上述代码中，我们定义了一个名为popup的class，用来控制弹出框的位置和样式。其中，position属性设置为fixed，表示元素的位置将固定不变。width和height属性分别设置为300px和200px，表示弹出框的宽度和高度。bottom和left属性分别设置为-200px和50%，表示弹出框初始时离底部有200px的距离，水平方向居中。background-color属性设置背景颜色为白色，border-radius属性设置圆角为5px，box-shadow属性设置边框阴影。而transition属性表示元素的变换效果，我们设置它为all 0.3s ease-out，表示所有属性变换都会有0.3秒的过渡效果，并且效果以缓出的方式进行。最后，我们再定义了一个名为show的class，在元素显示时添加这个class就能使弹出框从底部弹出。

最后，我们来编写jQuery代码，实现从底部弹出的效果。

$(document).ready(function() {

  // 弹出框隐藏
  $(".popup").hide();

  // 弹出框显示
  $(".btn-show-popup").click(function() {
    $(".popup").addClass("show").show();
  });

  // 弹出框隐藏
  $(".btn-hide-popup").click(function() {
    $(".popup").removeClass("show").hide();
  });

});

上述代码中，$(document).ready()表示当页面文档加载完成后执行下面的代码。首先，我们将弹出框的初始状态设置为隐藏。接着，在点击“显示弹出框”按钮时，我们先添加show类使弹出框从底部弹出，然后再显示它。而在点击“隐藏弹出框”按钮时，我们将show类移除使弹出框隐藏。

现在，我们已经完成了从底部弹出的效果。你可以在你的页面中自由使用这个效果，为用户带来更好的交互体验。