js逐步实现原生模态登录框(css逻辑 js逻辑)

简介: js逐步实现原生模态登录框(css逻辑 js逻辑)

html部分:

<nav>
        <div class="logo">
            <img src="img/img.png" alt="logo">
        </div>
        <ul>
            <li><a href="#">cyg</a></li>
            <li><a href="#">cyg</a></li>
            <li><a href="#">cyg</a></li>
            <li><a href="#">cyg</a></li>
        </ul>
    </nav>
    <header>
        <button  class="toggle" id="toggle">
            <i class="fa fa-bars fa-2x"></i>
        </button>
    <h1>666</h1>
     <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis,
        quisquam!
      </p>
      <button class="cta-btn" id="open">登录</button>
  </header>
         <div class="container">
             <h1>为什么选择米修在线?</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae quia,
        repellendus magnam enim dolorem alias adipisci commodi eum. Aspernatur
        debitis expedita rem itaque dolor! Obcaecati unde aliquam mollitia alias
        maxime.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum iure
        consequuntur labore eaque repellendus, impedit obcaecati ut veritatis ab
        sapiente.
      </p>
      <h2>我们的教学宗旨</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, quam!
        Officiis non quidem, nobis dolorum, illo, vel tenetur officia tempora
        error molestiae nostrum quis libero odit omnis ratione fuga voluptatum
        obcaecati vero impedit aliquid nihil doloribus dolorem. Commodi, beatae
        provident!
      </p>
      <h2>我们的优势</h2>
      <ul>
        <li>丰富的线上课程</li>
        <li>优秀的师资团队</li>
        <li>课后辅导及问答</li>
      </ul>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit modi
        facere non, rem est officia similique? Exercitationem alias provident
        magni optio veritatis, eligendi modi saepe ut eum expedita dolorem
        corrupti. Quis, iste. Ullam sit minima officiis animi a saepe modi,
        repellat reprehenderit eveniet molestias corporis cupiditate optio nemo
        dolorem adipisci quis voluptates dolorum molestiae delectus deleniti
        ducimus mollitia neque aliquid. Delectus a, perferendis vitae omnis est
        molestiae voluptates mollitia? Cumque?
      </p>
         </div>
         <!--模态框-->
         <div class="modal-container" id="modal">
             <div class="modal">
                 <button class="close-btn" id="close">
                     <i class="fa fa-times"></i>
                 </button>
                 <div class="modal-header">
                     <h3>登录</h3>
                 </div>
                 <div class="modal-content">
                      <p>登录了解更多课程及促销活动</p>
                      <form  class="modal-form">
                              <div>
                                  <label for="name"></label>
                                  <input type="text" name="" id="name" placeholder="请输入姓名" class="form-input">
                              </div>    
                               <div>
                              <label for="email">邮箱</label>
                              <input
                                type="email"
                                id="email"
                                placeholder="请输入邮箱"
                                class="form-input"
                              />
                            </div>
                            <div>
                              <label for="password">密码</label>
                              <input
                                type="password"
                                id="password"
                                placeholder="请输入密码"
                                class="form-input"
                              />
                            </div>
                            <div>
                              <label for="password2">确认密码</label>
                              <input
                                type="password"
                                id="password2"
                                placeholder="请再次输入密码"
                                class="form-input"
                              />
                               </div>
                            <input type="submit" value="提交" class="submit-btn" />
                      </form>
                     </div>
                 </div>
         </div>
    

html逻辑:
这么垃圾就不讲了哈.讲下css与js哈

图片:
在这里插入图片描述

css部分:

*{padding: 0px;margin:0px;}
        :root
        {
              --modal-duration: 2s;
              --primary-color: #30336b;
              --secondary-color: #be2edd;
        }
        body
        {
              font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
                transition: transform 0.5s ease;

        }
        body.show-nav {
  transform: translateX(200px);
}
        nav
        {
            background-color: var(--primary-color);
            color: #fff;
            position: fixed;
            left: 0px;
            top: 0px;
            width: 200px;
            height: 100vh;
            z-index:100;
            transform: translateX(-100%);
        }
        nav .logo {
              padding: 30px 0;
              text-align: center;
        }
        nav .logo img
        {
            width: 75px;
            height: 75px;
        }
        nav ul
        {
            list-style: none;

        }
        nav ul li
        {
            border-bottom: 2px solid rgba(200, 200, 200, 0.1);
            padding: 20px;
        }
        nav ul li:first-of-type {
          border-top: 2px solid rgba(200, 200, 200, 0.1);
        }
        nav ul li a
        {
            color: #fff;
            text-decoration: none;
        }
        nav ul li a:hover
        {
            text-decoration: underline;
        }
        header
        {
            background-color: var(--primary-color);
              color: #fff;
              text-align: center;
              padding: 40px 15px;
              position: relative;
              font-size: 130%;
        }header p {
  margin: 30px 0;
}

        button,input[type="submit"]
        {
            background-color: var(--secondary-color);
            border-radius: 5px;
              color: #fff;
              cursor: pointer;
              padding: 8px 12px;

              border: 0;
        }
        button:focus
        {
            outline: none;
        }
        .toggle {
             background-color: rgba(0, 0, 0, 0.3);
              position: absolute;
              top: 20px;
              left: 20px;
        }
        .cta-btn
        {
            padding: 12px 30px;
            font-size: 20px;
        }
        .container{
            padding: 15px;
            margin: 0px auto;
            max-width: 100%;
            width: 800px;
        }
        .modal-container {
              background-color: rgba(0, 0, 0, 0.6);
              position: fixed;
              top: 0px;
              bottom: 0;
              left: 0;
              right: 0;
              display: none;
        }
        .modal-container.show-modal {
          display: block;
        }
        .modal
        {
             background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  position: absolute;
   top: 50%;
  left: 50%;
   transform: translate(-50%, -50%);
    max-width: 100%;
  width: 400px;
  animation-name:  modalopen;
    animation-duration: var(--modal-duration);

        }
        .modal-header {
  background-color: var(--primary-color);
  color: #fff;
  padding: 15px;
}
    .close-btn {
  background-color: transparent;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 25px;
}    
.modal-content {
  padding: 20px;
}
.modal-form div {
  margin: 15px 0;
}

.modal-form label {
  display: block;
  margin-bottom: 5px;
}

.modal-form .form-input {
  padding: 8px;
  width: 100%;
}

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

css逻辑;
第一步:取消所有标签的(padding+margin),原因,因为会和效果有误差.
第二步:设置css变量:
怎么设?
定义变量:

:root
{
--modal-duration: 2s;
--primary-color: #30336b;
--secondary-color: #be2edd;
}

第三步:body里面所有的标签的效果过渡(过渡的标签名称 过渡的时间 什么速度过渡)为:
在这里插入图片描述

第四步:body里面的某一个div往右移动200px.
哪一个呢?
在这里插入图片描述
第五:
默认让上面的这个图片往左移动-100%消失.
并让它固定定位在左上角,自身宽高是200px 100vh。
在这里插入图片描述

第六:这上面的图片
在这里插入图片描述

图片:logo图片大小是75px 75px.没有小圆点.第一个li上面没有上边框.没有text-decoration: none;,触碰a要有text-decoration: underline;。

第七;
在这里插入图片描述

意思是;
第一;背景颜色为:var(--primary-color);相对定位让里面的标签都在head里面.文字居中,内边距左右40 上下15px.
第二;header左边外边距为30px。
第三;有小手手,内边距也就是文字自身与自身内部的距离.外边距是外部与外部的距离.
第四:

button:focus
        {
            outline: none;
        }

系统点击焦点边框的颜色清掉.

然后是这里的东西了.
在这里插入图片描述
第一步;在这里插入图片描述

固定定位,在这里插入图片描述

这个东西要显示就显示在可视区上下左右中心.

第二步;
在这里插入图片描述

去除掉在这里插入图片描述外面的紫色.

第四步;因为.modal有绝对定位,所以里面的这个绝对定位.close-btn相对于父元素.modal.

第五步:
在这里插入图片描述
代表在这里插入图片描述

第六步:
在这里插入图片描述

form代表0%代表透明.到100%看见.
在这里插入图片描述

js逻辑:
第一步:
在这里插入图片描述
获取
第一个是:在这里插入图片描述
第二个:
在这里插入图片描述
第三个:

在这里插入图片描述
第四个:
在这里插入图片描述

在这里插入图片描述代表是当点击模态框的时候,模态框none掉,如果点击的不是模态框false.

第二步:
在这里插入图片描述

点击在这里插入图片描述的时候,显示出来.因为是toggle函数所以在点击会消失.(回归原位把)

第三:
在这里插入图片描述

、点击登陆的时候,
在这里插入图片描述
在这里插入图片描述出来.

第四:
在这里插入图片描述

点击在这里插入图片描述的时候,none掉modal,模态框
完毕.

相关文章
|
4天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
10天前
|
JavaScript
原生JS实现全选、全不选
原生JS实现全选、全不选
|
9天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
13天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
33 3
|
12天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
19 2
|
6天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
11 0
|
6天前
|
JavaScript 前端开发
原生JS如何查询元素属性
原生JS如何查询元素属性
|
12天前
|
前端开发 JavaScript
js遍历添加栏目类添加css,再点击其它删除css
该文章介绍了使用JavaScript遍历添加和删除CSS类的方法。示例代码展示了如何在点击时为当前元素添加类,同时移除其他元素的类。其中包含两个示例:一是遍历`.radio-group .ckselect`并处理点击事件,二是实现点击`.zu-top-nav-userinfo`显示/隐藏`.peoples`层,并处理文档点击以关闭层。代码适用于网页交互效果的实现。
10 0
|
2天前
|
前端开发
HTML+CSS练习小项目——百叶窗
HTML+CSS练习小项目——百叶窗
|
6天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
25 5