css+div实现模态弹出层效果代码-html代码-BFW代码库

css+div实现模态弹出层效果代码

代码语言：html

所属分类：弹出层

代码描述：css+div实现模态弹出层效果代码，纯css实现打开关闭，calc实现居中自适应。

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

<html lang="en"><head>
<meta charset="UTF-8">
<style>
body { 
  padding: 2em 4em;
  font-family: Roboto, sans-serif;
}

.button {
  width: 10em;
  text-align: center;
  font-weight: bold;
  padding: 1em 2em;
  background: DEEPPINK;
  border-radius: 3em;
  color: white;
  cursor: pointer;
}

details > div {
  width: 20em;
  border: 2px solid black;
  padding: 1em 2em;
  position: fixed;
  width: 360px;
  height: 240px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: white;
  z-index: 3;
  box-shadow: 10px 10px 10px DIMGRAY;
}

details[open] summary::after { 
  content: "×"; 
  font-size: 28pt;  
  position: fixed; 
  right: calc(50vw - 360px / 2 - 2em); 
  top:  calc(50vh - 2.........完整代码请登录后点击上方下载按钮下载查看