<!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. c# 导出excel格式xlsx

    string sb="";//sql字符串 AttachmentConfigSection configSection = ConfigurationManager.GetSect ...

  2. Linux常用PDF阅读软件

    1.福昕阅读器是一款PDF文档阅读器,对中文的支持度非常高.福昕阅读器作为全球最流行的PDF阅读器,能够快速打开.浏览.审阅.注释.签署及打印任何PDF文件. 2.evince是一个支持多种格式的文件 ...

  3. 在Windows下如何创建指定的虚拟环境

    前几天给大家分享了如何在默认的情况下创建虚拟环境,没来得及上车的伙伴,可以戳这篇文章:在Windows下如何创建虚拟环境(默认情况下).今天小编给大家分享一下,如何创建的指定的Python环境. 创建 ...

  4. angular实现简单的pagination分页组件

    不想使用第三方库,只想使用一个分页器,那么就简单的实现一个,效果如下: 1.使用方式: <custom-pagination *ngIf="enterpriseList.length& ...

  5. Scrapy中将数据保存至数据库

    一.在settings.py文件中配置数据库连接参数 # 数据库连接参数 DB_HOST = '192.168.183.1' DB_PORT = 3306 DB_USER = 'root' DB_PA ...

  6. 洛谷 P2558 [AHOI2002]网络传输

    P2558 [AHOI2002]网络传输 题目描述 在计算机网络中所有数据都是以二进制形式来传输的. 但是在进行较大数据的传输时,直接使用该数的二进制形式加以传输则往往传输的位数过多. 譬如要传输 1 ...

  7. ListView常用操作

    1.设置ListView只显示一列,并且每加一条记录是向下添加的. ListView添加方法:把View属性改成Details,再Columns属性中添加一列 然后用如下代码即可实现 ListView ...

  8. zoj 2317 Nice Patterns Strike Back(矩阵乘法)

    problemId=1317">http://acm.zju.edu.cn/onlinejudge/showProblem.do? problemId=1317 给出一个n*m的矩阵( ...

  9. 修正单纯形法&#183;优化算法实现&#183;Java

    修正单纯性法 代码例如以下: 舍去了输入转化的内容,主要包括算法关键步骤. public class LPSimplexM { private static final double inf = 1e ...

  10. Day5费用流

    算法 zkw费用流:多路增广,增光D[y]=D[i]+c的边 无源汇上下界最小费用可行流 每次强行增加下界的流量 类似网络流,拆边 原边的费用为c,拆出来的边费用为0 负边和负圈 直接应用 SDOI2 ...