<!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. 外部数据库驱动程序XX中的意外错误

    链接EXCEL打开报错 代码如下(Excel2003版本)出现这种错误 现在只需要更改 修改成 并且把导入版本修改

  2. Chromium Graphics: HW Video Acceleration in Chrom{e,ium}{,OS}

    HW Video Acceleration in Chrom{e,ium}{,OS} Ami Fischman <fischman@chromium.org> Status as of 2 ...

  3. 计算机科学书籍推荐和CSS、js书籍推荐

    计算机科学:<深入理解计算机系统>,这是基础知识 JavaScript:JavaScript高级程序设计:大名鼎鼎的红宝书 <精通CSS:高级Web标准解决方案>:因为我觉CS ...

  4. 【Django】Web框架本质

    目录 根据不同的路径返回不同的内容 普通版 函数版 函数进阶版 返回具体的HTML文件 让网页动态起来 服务器和应用程序 wsgiref 模块 @ * 我们可以这样理解:所有的==Web应用本质上就是 ...

  5. 【APP测试】APP弱网环境测试

    方法一:利用抓包工具 1.利用fiddler通过代理连接上手机之后,进入Fiddler->Rules->Customize Rules,点击弹出的CustomRules.js文件,找到m_ ...

  6. nginx下修改svn配置

    最近公司的SVN服务器地址做了变更,而我用的操作系统是Ubuntu操作系统,我也不想把以前下载的代码重新进行修改,我想通过修改svn地址,应该可以,终于在网上通过查找资料,找到了解决的方法:      ...

  7. 【Henu ACM Round#14 A】Vitaly and Night

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 连续两个如果不全是0就递增cnt [代码] #include <bits/stdc++.h> using namespa ...

  8. HDU——T 1166 敌兵布阵

    http://acm.hdu.edu.cn/showproblem.php?pid=1166 Time Limit: 2000/1000 MS (Java/Others)    Memory Limi ...

  9. iOS项目开发实战——iOS网络编程获取网页Html源码

    现在我们身处互联网的时代.不论什么一个软件或是App,都会或多或少与网络打交道,并不断发生数据交互.一个没有涉及网络编程的应用会显得比較low,这里我们将会開始使用Swift开发iOS应用,而且主要来 ...

  10. vim 基础学习之可视模式

    1. 选择模式这个模式必须通过可视模式进入.在可视模式下,我们通过 <C-g>来把我们的可视选中块作为选择模式下的操作块. 这时候我们输入可见字符,就会把这个块给覆盖掉.例如aaa bbb ...