<!doctype html>

 <html>

   <head>

     <meta charset="utf-8">

     <title>JS/CSS 注册表单（模态框设置）</title>

     <style>

 input[type=email], input[type=password] {

     width: 100%;

     padding: 12px 20px;

     margin: 8px 0;

     display: inline-block;

     border: 1px solid #ccc;

     box-sizing: border-box;

 }

 button {

     background-color: #4CAF50;

     color: white;

     padding: 14px 20px;

     margin: 8px 0;

     border: none;

     cursor: pointer;

     width: 100%;

 }

 .cancelbtn {

     padding: 14px 20px;

     background-color: #f44336;

 }

 .cancelbtn,.signupbtn {float:left;width:50%}

 .container {

     padding: 16px;

 }

 .modal {

     display: none;

     position: fixed;

     z-index: 1;

     left: 0;

     top: 0;

     width: 100%;

     height: 100%;

     overflow: auto;

     background-color: rgb(0,0,0);

     background-color: rgba(0,0,0,0.4);

     padding-top: 60px;

 }

 .modal-content {

     background-color: #fefefe;

     margin: 5% auto 15% auto;

     border: 1px solid #888;

     width: 80%;

 }

 .close {

     position: absolute;

     right: 35px;

     top: 15px;

     color: #000;

     font-size: 40px;

     font-weight: bold;

 }

 .close:hover,

 .close:focus {

     color: red;

     cursor: pointer;

 }

 .clearfix::after {

     content: "";

     clear: both;

     display: table;

 }

     </style>

   </head>

   <body>

     <h1>

       注册表单

     </h1>

     <button   onclick="document.getElementById('mymodel').style.display='block'">

       注册

     </button>

     <h1>

       登录表单

     </h1>

     <button   onclick="document.getElementById('mymodel1').style.display='block'">

       登录

     </button>

     <div class="modal" id="mymodel">

       <span onclick="document.getElementById('mymodel').style.display='none'" class="close" >×</span>

      <form class="modal-content animate" action="www.baidu.com">

       <div class="container">

       <div>

         <label for="myemail">邮箱</label>

         <input type="email" placeholder="请输入邮箱" name="myemail">

       </div>

        <div>

         <label for="mypassword">密码</label>

         <input type="password" placeholder="请输入密码" name="mypassword">

       </div>

        <div>

         <label for="repassword">确认密码</label>

         <input type="password" placeholder="确认密码" name="repassword">

       </div>

       <div>

         <input type="checkbox" name="checked"><label for="checked">记住密码</label>

       </div>

       <div>

         <p>

           请仔细阅读我们的<a href="#">服务条款</a>

         </p>

       </div>

       <div class="clearfix">

         <button type ="button" onclick="document.getElementById('mymodel').style.display='none'" class="cancelbtn">

           取消

         </button>

         <button  class="signupbtn" type="submit">

           注册

         </button>

       </div>

        </div>

      </form>

     </div>

     <!--模态框可以作为复用组件-->

     <div class="modal" id="mymodel1">

       <span onclick="document.getElementById('mymodel1').style.display='none'" class="close" >×</span>

      <form class="modal-content animate" action="www.baidu.com">

       <div class="container">

       <div>

         <label for="myemail">邮箱</label>

         <input type="email" placeholder="请输入邮箱" name="myemail">

       </div>

        <div>

         <label for="mypassword">密码</label>

         <input type="password" placeholder="请输入密码" name="mypassword">

       </div>

       <div>

         <input type="checkbox" name="checked"><label for="checked">记住密码</label>

       </div>

       <div class="clearfix">

         <button type ="button" onclick="document.getElementById('mymodel1').style.display='none'" class="cancelbtn">

           取消

         </button>

         <button  class="signupbtn" type="submit" >

           登录

         </button>

       </div>

        </div>

      </form>

     </div>

     <script>

       // 获取模型

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

     // 鼠标点击模型外区域关闭登录框

     window.onclick = function(event) {

       if (event.target == modal) {

         modal.style.display = "none";

     }

 }

     </script>

   </body>

 </html>

主要是CSS美化，每次完成一个小动作时要知道心中有图，知道哪一种属性能实现什么样的效果，可以把它们封装成不同的组件，实现复用，bootstrap就是封装了一个css库。和一些配合js，html的组件，

JS /CSS 实现模态框（注册和登录组件）的更多相关文章

  1. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  2. js控制Bootstrap 模态框（Modal）插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  3. JS 实现图片模态框，幻灯片，跑马灯功能

    网站中常用的幻灯片和模态框,使用 HTML.JavaScript 与 CSS 来创建 Lightbox,类似相册预览功能.可以运用到视频网站,商城,相册上去 参考了菜鸟教程,有兴趣自己去看 HTML/ ...

  4. JS学习笔记(模态框JS传参)

    博主最近基于django框架的平台第一版差不多完成了 今天整理下开发过程中遇到的前端知识 基于前端bootstrap框架模态框传参问题 上前端html代码: <div class="m ...

  5. 44 CSS 浮动 模态框 定位

    一.浮动 float : 浮动的盒子不占原来的位置,其下方的盒子会上移 父盒子会发生塌陷现象.同一级盒子right浮动,同级左边的盒子需要左浮动,right浮动的盒子才能上来 由于浮动框不在文档的普通 ...

  6. 【html/css】模态框的实现

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. js+css实现模态层效果

    在做web前端的时候,有些时候会涉及到模态层,在此提供一种实现思路.希望对大家实用.先贴效果吧: 模态层效果 以下说说在写模态层的时候的思路:通过可配置的參数width,height,title以及c ...

  8. MVC中调用模态框之后导致JS失效

    今天在工作中碰到一个页面调用模态框之后,页面原来的JS失效的问题,由于前台经验较少,折腾了一天... 问题描述是这样,在页面,有两个下拉列表框A和B,做了下拉列表框联动,有一个button按钮会调用模 ...

  9. 轻量级Modal模态框插件cta.js

    今天给大家分享一款轻量级Modal模态框插件cta.js.这是一款无需使用jQuery插件,纯js编写的模态框弹出特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <se ...

随机推荐

  1. Windows环境下VMware虚拟机的自启动与自动关机--命令行操作

    .设置开机免密登录系统 1. 按下Windows + R 组合键,输入“netplwiz”,点击回车. 2. 去除需要密码登录的勾. 3. 如果需要密码,输入密码,点击确认.   二.编辑vmware ...

  2. Django_模型操作

  3. ubuntu下vim中内容拷贝到浏览器

    在vim中编辑好了代码想要复制出来到浏览器或者其它地方.用yy复制后去别的地方粘帖发现根本不是当初复制的内容,非常头疼-- 这是由于vim中有它自己的一套剪贴板系统(clipboard).这套系统和u ...

  4. 关于命令行签名时.SF和.RSA文件的命名问题

    准备工作: 签名文件名称为android.keystore 签名的别名为123456789.keystore 1.使用签名命令后例如以下图 发现.SF和.RSA文件自己主动命名为12345678.SF ...

  5. .Net数据操作案例

    Interface using System.Collections.Generic; using Ddd.Core.Domain.Customers; namespace Ddd.Services. ...

  6. Css盒模型有哪几部分，标准盒模型和IE盒模型有哪些区别

    首先介绍Css的盒模型也就是标准盒模型(BOX Model) 包含了 内容(content) 内边距(padding) 边框(border) 外边框(margin) 这是大家经常用到的,也是现在的标准 ...

  7. Kinect 开发 —— 进阶指引 （下）

    运动识别 利用运动识别(motion detection)来进行近景识别是最有意思的一种方式.实现运动识别的基本原理是设置一个起始的基准RGB图像,然后将从摄像头获取的每一帧影像和这个基准图像进行比较 ...

  8. html页面中块级元素的居中

    第一:在页面中使用 margin: 0 auto;居中: <div> <p>夜屋</p> </div> div { width: 100%; posit ...

  9. 【canvas】跟随鼠标的星空连线

    2019-01-23 19:57:38 挂一个比较简单的一个canvas应用,利用CPU进行粒子实时计算,直接面向过程写的 帧动画:浏览器在下一个动画帧安排一次网页重绘,  requestAnimat ...

  10. View_01_LayoutInflater的原理、使用方法

    View_01_LayoutInflater的原理.使用方法 本篇博客是郭神博客Android视图状态及重绘流程分析,带你一步步深入了解View(一)的读书笔记的笔记. LayoutInflater简 ...