SOURCE

function openLarge(){
      $(".littleP").hide()
      $(".largeP").show()
      $(".dialog").show()
    }
    function openLittle(){
      $(".largeP").hide()
      $(".littleP").show()
      $(".dialog").show()
    }
    function closeDialog(){
      $(".dialog").animate({scrollTop:0},0);
      $(".dialog").hide()
    }

<div class="dialog">
    <header class="header">
      活动说明
    </header>
    <div class="content">
      <p class="littleP largeP">客人于指定时间地点集合，联系我们的领队，由我们的专业领队一起协助您办理等船手续，您如有大件行李（手提行李除外）可交给邮轮的工作人员帮您办理托运，他们会将行李送至各位贵客所在的客舱。然后就一起排队出关，邮轮将于当天开船，我们将开始这次轻松而又浪漫的邮轮假期之旅。请严格按照出团通知书要求时间集合办理登船手续！码头地址：上海市宝山区宝杨路1号上海吴淞口国际邮轮港。</p>
      <p class="largeP">客人于指定时间地点集合，联系我们的领队，由我们的专业领队一起协助您办理等船手续，您如有大件行李（手提行李除外）可交给邮轮的工作人员帮您办理托运，他们会将行李送至各位贵客所在的客舱。然后就一起排队出关，邮轮将于当天开船，我们将开始这次轻松而又浪漫的邮轮假期之旅。请严格按照出团通知书要求时间集合办理登船手续！码头地址：上海市宝山区宝杨路1号上海吴淞口国际邮轮港。</p>
      <p class="largeP">客人于指定时间地点集合，联系我们的领队，由我们的专业领队一起协助您办理等船手续，您如有大件行李（手提行李除外）可交给邮轮的工作人员帮您办理托运，他们会将行李送至各位贵客所在的客舱。然后就一起排队出关，邮轮将于当天开船，我们将开始这次轻松而又浪漫的邮轮假期之旅。请严格按照出团通知书要求时间集合办理登船手续！码头地址：上海市宝山区宝杨路1号上海吴淞口国际邮轮港。</p>
      <p class="largeP">客人于指定时间地点集合，联系我们的领队，由我们的专业领队一起协助您办理等船手续，您如有大件行李（手提行李除外）可交给邮轮的工作人员帮您办理托运，他们会将行李送至各位贵客所在的客舱。然后就一起排队出关，邮轮将于当天开船，我们将开始这次轻松而又浪漫的邮轮假期之旅。请严格按照出团通知书要求时间集合办理登船手续！码头地址：上海市宝山区宝杨路1号上海吴淞口国际邮轮港。</p>
      <div class="push">
      </div>
    </div>
    <footer class="footer">
        <div onclick="closeDialog()" class="confirm-btn">我知道了</div>
    </footer>
  </div>
  </div>

  <div class='container'>
    <h3>什么是 “Sticky Footer”</h3>
    <div onclick="openLarge()" class="btn">打开弹窗（内容很多）</div>
    <div onclick="openLittle()" class="btn">打开弹窗（内容很少）</div>
    <img style="width: 60%" src="https://ws1.sinaimg.cn/large/006tNbRwgy1fwswrikfbpj30ju0e4jrt.jpg" alt="" />
    <h3>所谓 “Sticky Footer”，并不是什么新的前端概念和技术，它指的就是一种网页效果：
      如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。</h3>
  </div>

 .content {
      min-height: 95%;
      margin-bottom: -80px;
      /* 等于footer的高度 */
    }

    .footer,.push {
      height: 80px;
    }

    .footer{
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .confirm-btn{
      padding: 5px 15px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }

    .dialog {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(255, 255, 255, 0.9);
      z-index: 999;
      padding: 70px 16px 0 16px;
      overflow: auto;
      display: none;
    }

    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 20px;
      font-weight: 600;
      border-bottom: 1px solid #ccc;
      background-color: white;
    }

    .container {
      text-align: center;
    }

    .btn {
      padding: 20px;
      background-color: gray;
      color: white;
      margin: 20px auto;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      font-size: "微软雅黑";

    }