css实现底部弹出的模态窗弹出层效果代码-html代码-BFW代码库

代码语言：html

所属分类：弹出层

代码描述：css实现底部弹出的模态窗弹出层效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

/* The Modal (background) */
.bottom-sheet {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s;
}

/* Modal Content */
.bottom-sheet-content {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-height: 80vh;
  overflow: auto;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s;
  background-color: #fefefe;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.bottom-sheet-header {
  padding: 2px 15px;
  height: 50px;
  background-color: #5cb85c;
  color: white;
  flex-shrink: 0;
}

.bottom-sheet-footer {
  padding: 2px 15px;
  background-color: #5cb85c;
  color: white;
  flex-shrink: 0;
}

.bottom-sheet-body {
  padding: 2px 16px;
  flex-grow: 1;
  overflow: auto;
  min-height: 2em;
}

/* The Close Button */
.bottom-sheet-close {
  color: white;
  float: right;
  font-size: 25px;
  font-weight: bold;
}

.bottom-sheet-close:hover,
.bottom-sheet-close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>



</head>

<body>
  <h2>Bottom Sheet</h2>

<button id="myBtn">Open Modal</button>
<button id="myBtn1">Open Modal 1</button>

<div id="myModal" class="bottom-sheet">
  <div class="bottom-sheet-content">
    <div class="container">
      <div class="bottom-sheet-header">
        <span id="myModal-close" class="bottom-sheet-close">&times;</span>
        <h2>Modal Header</h2>
      </div>
      <div class="bottom-sheet-body">
        <p>Some text in the Modal Body</p>
        <p> Where can I get some?
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is theref.
          Where can I get some?
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is theref.</p>
        </p>
      </div>
      <div class="bottom-sheet-footer">
        <h3>Modal Footer</h3>
      </div>
    </div>
  </div>
</div>

<div id="myModal1" class="bottom-sheet">
  <div class="bottom-sheet-content">
    <div class="container">
      <div class="bottom-sheet-header">
        <span id="myModal1-close" class="bottom-sheet-close">&times;</span>
        <h2>Modal Header 1</h2>
      </div>
      <div class="bottom-sheet-body">
        <p>Some text in the Modal Body</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever sin.........完整代码请登录后点击上方下载按钮下载查看