<!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. javascript学习笔记总结

    1 有些浏览器可能不支持JavaScript,我们可以使用如下的方法对它们隐藏JavaScript代码. <html> <body> <script type=" ...

  2. 学习总结--Dom

    节点(每个元素都会有的3个nodeValue nodeType nodeName:) 1 元素节点 nodeName 元素节点名 nodeType 1 nodeValue null或者undefine ...

  3. dos 实用命令搜集

    dos 命令: 1.netstat -an 2.XP下打开凭证管理:  control keymgr.dll 3.刷新DHCP协议,重新自动获取IP *   ipconfig/release 命令来丢 ...

  4. 安卓https

    http://www.tuicool.com/articles/NrmE3e http://blog.csdn.net/guestcode/article/details/50194357 http: ...

  5. 【J2EE】在项目中理解J2EE规范

             J2EE平台由一整套服务(Service),应用程序接口(API)和协议构成,它对开发企业级应用提供了功能支持.13个核心技术各自是JDBC, JNDI, EJB, RMI, JSP ...

  6. POJ 1006 Biorhythms （数论-中国剩余定理）

    Biorhythms Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 111285   Accepted: 34638 Des ...

  7. 改动GDAL库支持RPC像方改正模型

    近期在做基于RPC的像方改正模型.方便对数据进行測试,改动了GDAL库中的RPC纠正模型,使之能够支持RPC像方改正參数. 以下是RPC模型的公式,rn,cn为归一化之后的图像行列号坐标,PLH为归一 ...

  8. android 图片特效处理之 图片叠加

    这篇将讲到图片特效处理的图片叠加效果.跟前面一样是对像素点进行处理,可参照前面的android图像处理系列之七--图片涂鸦,水印-图片叠加和android图像处理系列之六--给图片添加边框(下)-图片 ...

  9. java knowledge record

    javax.accessibility.Accessible       给予private  或者 final 变量可以改变的机会

  10. 一台服务器安装运行多个Tomcat及注册服务

    项目需要,自己配置了一下,顺便分享出来. 1.下载对应版本Tomcat,这里下载Tomcat7.0.65.zip; 下载地址:http://archive.apache.org/dist/tomcat ...