模态框

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框</title>
    <link rel="stylesheet" href="模态框.css">
    <script src="模态框.js"></script>
</head>
<body>
    <header>
        <h2 class="title">二刺螈</h2>
        <figure>
            <div>
              <span>Hover Me</span>
              <span onclick="showModal()">登录</span>
            </div>
          </figure>
    </header>        
    <div class="jpg">
           <!-- 内容区 -->
    </div>
    <!-- 模态框 -->
    <div class="modal">
        <!-- 半透明遮罩 -->
        <div class="modal-bg" onclick="closeModal()"></div>
        <!-- 弹层表单 -->
        <form action="" class="modal-form">
            <fieldset style="display: grid; gap: 1em;">
                <legend>用户登录</legend>
                <input type="email" name="emali" placeholder="user@mail.com"/>
                <input type="password" name="psw" id="psw" placeholder="不少于六位密码">
                <button>登录</button>
            </fieldset>
        </form>
    </div>
</body>
</html>

css样式：

/* 初始化 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 头部样式 */
header {
    background-color: #2C3E50;
    padding: 0.5em 1em;
    display: flex;
    height: 10vh;
}
header .title {
    font-weight:400;
    font-style:normal;
    font-size: 35pt;
    color: aliceblue;
    letter-spacing: 10px;
    text-shadow: 1px 1px 1px #D0D0D0;
}
/* text-shadow:(水平阴影（必须），垂直阴影（必须），模糊距离（可选），阴影颜色（必须）) */
/* letter-spacing:(字间距) */
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
figure {
  width: 200px;
  height: 60px;
  cursor: pointer;
  perspective: 500px;
  -webkit-perspective: 500px;
  margin-left: auto;
  margin-top: 10px;
}
figure div {
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: 0.25s;
  -webkit-transition: 0.25s;
}
figure:hover div {
  transform: rotateX(-90deg);
}
span {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  border: 5px solid #fff;
  font-family: "Source Sans Pro", sans-serif;
  line-height: 50px;
  font-size: 17pt;
  text-align: center;
  text-transform: uppercase;
}
span:nth-child(1) {
  color: #fff;
  transform: translate3d(0, 0, 30px);
  -webkit-transform: translate3d(0, 0, 30px);
}
span:nth-child(2) {
  color: #1c175d;
  background: #fff;
  transform: rotateX(90deg) translate3d(0, 0, 30px);
  -webkit-transform: rotateX(90deg) translate3d(0, 0, 30px);
}
/* 模态框 */
.modal .modal-form{
    width: 20em;
    height: 20em;
}
.modal .modal-form fieldset{
    height: 15.5em;
    width: 20em;
    background-color: #d0d0d0;
    border:none;
    padding: 2rem,3em;
    box-shadow: 0 0 5px #888;
    border-radius: 0 0 1em 1em ;
}
/* 模态框表单标题 */
.modal .modal-form fieldset legend{
    padding:5px 1.5em;
    height: 3em;
    width: 25em;
    background-color: #2C3E50;
    color: white;
    text-align: center;
    border-radius: 1em 1em 0 0;
}
/* 表单 */
.modal .modal-form fieldset input{
    height: 3em;
    width: 25em;
    padding: 0.6em;
    outline: none;
    border:1px solid #2C3E50;
    font-size: 14px;
    margin: 0.6em auto;
}
.modal .modal-form fieldset button{
    width: 10em;
    text-align: center;
    position: relative;
    left: 7.5em;
    bottom: 0.6em;
}
/* focus  */
.modal .modal-form fieldset input :focus{
    box-shadow: 0 0 8px #888;
    border:none;
}
.modal .modal-form fieldset button{
    background-color: #2C3E50;
    color: white;
    border:none;
    font-size: 16px;
    height: 2.5em;
}
.modal .modal-form fieldset button:hover{
    cursor: pointer;
    background-color:black;
    transition: 0.3s;
    box-shadow: 4px 4px 1px white;
}
/* 定位 */
.modal .modal-form{
    position:fixed;
    top:20em;
    left: auto;
    right: 50em;
}
.modal .modal-form fieldset legend {
    position: relative;
    bottom: 1.01em;
}
/* 遮罩 */
.modal .modal-bg{
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 定位在四个方向的原点 */
    background-color: rgb(0,0,0,0.5);
}
.modal {
    display: none;
}
.jpg {
    width: 100vw;
    height: 100vh;
    background-color: #D0D0D0;
}

JS代码：

function showModal() {
    // 获取模态框元素
    const modal = document.querySelector('.modal');
    // 显示模态框
    modal.style.display = 'block';
    // 焦点自动置入第一个输入框email
    modal.querySelector('input:first-of-type').focus();
}
function closeModal() {
    // 获取模态框元素
    const modal = document.querySelector('.modal');
    // 关闭模态框
    modal.style.display = 'none';
}

呈现效果：

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

Python

2022-03-19 19:23:45