<!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. 2017 ACM-ICPC 亚洲区（南宁赛区）网络赛 (B,F,L,M)

    B. Train Seats Reservation You are given a list of train stations, say from the station 1 to the sta ...

  2. python pdb小结

    Debug功能对于developer是非常重要的,python提供了相应的模块pdb让你可以在用文本编辑器写脚本的情况下进行debug. pdb是python debugger的简称.常用的一些命令如 ...

  3. javaScript 预编译过程浅尝

    javaScript 预编译过程 1.创建AO对象(Activation Object) AO{ a: } 2.找形参和变量声明,将变量和形参作为AO属性名,值为undefined AO{ a:und ...

  4. AtCoderAGC003D Anticube

    Description: 给定一个序列\(a\),要求选出最多的序列元素并保证两两元素的乘积不为立方数 Solution: 我们考虑哪些因子是有用的,如果一个因子的指数\(>3\),我们可以将他 ...

  5. 如何在 Highcharts 图中当所占百分比为 0 时不显示0%

    解决办法其实很简单,将enabled属性改为false即可: dataLabels: { enabled: false } 完成之后的显示如下

  6. Spring Cloud学习笔记【三】服务消费者Feign

    Feign 是一个声明式的 Web Service 客户端,它的目的就是让 Web Service 调用更加简单.它整合了 Ribbon 和 Hystrix,从而让我们不再需要显式地使用这两个组件.F ...

  7. 安装Apache PHP MySQL PHPMyAdmin

    视频教程:https://www.youtube.com/watch?v=FJC2iGt_2bc,Youtube看不了的FQ吧-3- 本人参考这篇文章:http://blog.csdn.net/kno ...

  8. Ubuntu安装php

    http://jingyan.baidu.com/article/dca1fa6fadc61ff1a5405244.html

  9. ASP.NET中的几种弹出框提示

    B/S不像C/S那样一个MessageBox就可以弹出提示框,不过可以通过js的“Alert”来弹出消息,或者通过一些变种的js方法.下面我给大家介绍几种,希望大家喜欢. 四种弹出框代码: prote ...

  10. 利用HTTP代理录制Jmeter脚本

    1 測试计划中加入一个线程组1 2在"工作台"-非測试元件-加入"HTTP代理server" port: 代理server的port,默认8080,可自行改动, ...