世界上最伟大的投资就是投资自己的教育

首页Html-CSS
随风 · 练气

如何用 HTML css 和 JavaScript 写一个模态框(modal)

随风发布于1874 次阅读

先看下效果:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Simple Modal</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <button id="modalBtn" class="button">Click Here</button>

  <div id="simpleModal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <span class="closeBtn">&times;</span>
        <h2>Modal Header</h2>
      </div>
      <div class="modal-body">
        <p>Hello...I am a modal</p>
        <p>Lorem ipsum dolor sit amet, consectetur magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum</p>
      </div>
      <div class="modal-footer">
        <h3>Modal Footer</h3>
      </div>
    </div>
  </div>

  <script src="main.js"></script>
</body>
</html>

main.js

var modal = document.getElementById('simpleModal');

var modalBtn = document.getElementById('modalBtn');

var closeBtn = document.getElementsByClassName('closeBtn')[0];

modalBtn.addEventListener('click', openModal);

closeBtn.addEventListener('click', closeModal);

window.addEventListener('click', outsideClick);

function openModal() {
  modal.style.display = "block";
}

function closeModal() {
  modal.style.display = 'none';
}

function outsideClick(e) {
  if (e.target == modal) {
    modal.style.display = 'none';
  }
}

style.css

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

.button {
  background: coral;
  padding: 1em 2em;
  color: #fff;
  border: 0;
}

.button:hover {
  background: #333;
}

.button:focus {
  outline: none;
}

.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #f4f4f4;
  margin: 20% auto;
  width: 70%;
  box-shadow: 0 5p 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
  animation-name: modalopen;
  animation-duration: 3s;
}

.modal-header {
  background: coral;
  padding: 15px;
  color: #fff;
}

.modal-body {
  padding: 10px 20px;
}

.modal-footer {
  background: coral;
  padding: 10px;
  color: #fff;
  text-align: center;
}

.closeBtn {
  color: #ccc;
  float: right;
  font-size: 30px;
  color: #fff;
}

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

@keyframes modalopen {
  from { opacity: 0 }
  to { opacity: 1 }
}

完结。

本站文章均为原创内容,如需转载请注明出处,谢谢。

0 条回复
暂无回复~~
喜欢
我的微信官网服务号精品文章订阅号微信视频号
程序员随风
统计信息
    学员: 22232
    视频数量: 1463
    文章数量: 460

© 汕尾市求知科技有限公司 | 专业版网站 | 关于我们 | 在线学员:1147

粤公网安备 44152102000088号粤公网安备 44152102000088号 | 粤ICP备19038915号

Top