实例演示模态框 - - php中文网博客

首页 > 博客列表 > 实例演示模态框

博主信息

博文 6

粉丝 0

访问量 5466

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

实例演示模态框

似水流年

原创

578人浏览过

源码：

<!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>
  <style>
    @import 'static/media.css';
    @import 'static/modal.css';
  </style>
</head>
<body>
<header>
  <h1>似水流年の博客</h1>
  <button  onclick="showModal()">登陆</button>
</header>
<nav>
  <a href="">首页</a>
  <a href="">日记</a>
  <a href="">资讯</a>
  <a href="">资料</a>
</nav>
<section>
  <article>
    <h2>文章标题</h2>
  </article>
  <aside>
    <dt>分类</dt>
    <dd>日记</dd>
    <dd>资讯</dd>
    <dd>资料</dd>
  </aside>
</section>
<footer>
  <div class="contact">
    <a class="contact" href="">关于我们</a><a href="">版权声明</a><a href="">联系我们</a>
  </div>
  <div class="line"></div>
  <div class="copyright">
    <p>copyright &nbsp;© &nbsp; 2022 &nbsp; 似水流年</p>
  </div>
</footer>
<!-- 模态框 -->
    <div class="modal">
      <!-- 1. 半透明的遮罩 -->
      <div class="modal-bg" onclick="closeModal()"></div>
      <!-- 2. 弹层表单 -->
      <form action="" class="modal-form">
          <fieldset style="display: grid; gap: 1em">
              <legend>用户登录</legend>
              <input type="email" name="email" placeholder="user@email.com" />
              <input type="password" name="password" placeholder="不少于6位" />
              <button>登录</button>
          </fieldset>
      </form>
  </div>
<script src="static/modal.js" ></script>
</body>
</html>

media.css样式：

<style>
  *{margin: 0;padding: 0;box-sizing: border-box;}
/* 媒体尺寸小于767的显示样式 */
@media (max-width:767px) {
  .header{
    background-color: #ccc;
  }
  /* 未写完 */
}
/* 媒体尺寸大于768的显示样式 */
@media  (min-width:768px){
header{
 background-color: indigo;
 padding: 0.5em 1em;
 display: flex;
}
header h1{
  color: #fff;
  font-weight:lighter;
  letter-spacing: 2px;
  /* 字间距 */
  text-shadow: 1px 1px 1px #fff;
  /* 字体阴影 向左距离，向下的距离，模糊的距离，颜色 */
}
header button{
  color: #000;
  margin-left: auto;
  background-color: bisque;
  font-size: 15px;
  width: 4em;
  height: 2em;
  border: none;
  border-radius: 0.3em;
  cursor: pointer;
}
header button:hover{
  color: #fff;
  margin-left: auto;
  background-color: bisque;
  font-size: 15px;
  width: 4em;
  height: 2em;
  border: none;
  border-radius: 0.3em;
  cursor: pointer;
  box-shadow: 0 0 0.2em #fff;
}
nav{
background-color: rgb(53, 6, 53);
height: 2.5em;
line-height: 2.5em;
font-size: 2em;
}
nav>a:nth-of-type(-n+3){
border-right: 1px solid #fff;
}
nav a{
  color: #fff;
  padding: 0 0.5em 0.5em ;
  text-decoration: none;
}
nav a:hover{
  color: #fff;
  padding: 0 0.5em 0.5em ;
  background-color: darkorchid;
}
section{
display: flex;
}
article{
border: 1px solid #ccc;
margin: 1em 1em;
border-radius: 0.5em;
padding: 1em ;
width: 70%;
}
article>h2{
  color: rgb(4, 71, 216);
  border-bottom: 1px dashed #ccc;
  margin-bottom: 5em;
}
aside{
  margin:1em 1em 1em 0.5em;
  width: 20%;
  border: 1px dashed #ccc;
  border-radius: 0.5em;
}
aside>dt{
  font-weight: bold;
  border-bottom: 1px dashed #ccc;
}
aside>dd{
  padding: 0.1em;
}
footer{
  background-color: indigo;
  padding: 0.1em 0.2em;
  color: #fff;
  font-size: 16px;
}
.contact{
  margin: 0 auto;
}
.contact a{
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.1em;
  padding-left: 0.5em;
}
.line{
  margin: 0.5em 0em;
  height: 1px;
  background-color: rgb(166, 51, 177);
}
.copyright{
  margin: 0 auto;
}
}
/* 模块框表单部分样式是复制的老师的 */
/* 模态框 */
.modal .modal-form fieldset {
  height: 15.5em;
  background-color: #dd5a57;
  border: none;
  padding: 2em 3em;
  box-shadow: 0 0 5px #888;
}
/* 模态框表单标题 */
.modal .modal-form fieldset legend {
  padding: 7px 1.5em;
  background-color: rgb(4, 71, 216);
  color: white;
}
.modal .modal-form fieldset input {
  height: 3em;
  padding-left: 1em;
  outline: none;
  border: 1px solid #ddd;
  font-size: 14px;
}
/* :focus: 表单控件,获取焦点时的样式 */
.modal .modal-form fieldset input:focus {
  box-shadow: 0 0 8px #888;
  border: none;
}
.modal .modal-form fieldset button {
  background-color: rgb(4, 71, 216);
  color: white;
  border: none;
  height: 3em;
  font-size: 16px;
  height: 2.5em;
}
.modal .modal-form fieldset button:hover {
  background-color: coral;
  cursor: pointer;
}
/* 定位 */
.modal .modal-form {
  position: fixed;
  top: 10em;
  left: 38em;
  right: 38em;
}
/* 遮罩 */
.modal .modal-bg {
  position: fixed;
  /* 坐标全部清0,请定位到四个顶点 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(0, 0, 0, 0.5);
}
.modal {
  display: none;
}
</style>

预览图：

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

markdown语法练习及html标签功能

2022-03-18 16:59:07