JS /CSS 实现模态框（注册和登录组件）
<!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 实现模态框（注册和登录组件）的更多相关文章
- 使用bootstrap的JS插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
- js控制Bootstrap 模态框（Modal）插件
js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html
- JS 实现图片模态框，幻灯片，跑马灯功能
网站中常用的幻灯片和模态框,使用 HTML.JavaScript 与 CSS 来创建 Lightbox,类似相册预览功能.可以运用到视频网站,商城,相册上去 参考了菜鸟教程,有兴趣自己去看 HTML/ ...
- JS学习笔记(模态框JS传参)
博主最近基于django框架的平台第一版差不多完成了 今天整理下开发过程中遇到的前端知识 基于前端bootstrap框架模态框传参问题 上前端html代码: <div class="m ...
- 44 CSS 浮动 模态框 定位
一.浮动 float : 浮动的盒子不占原来的位置,其下方的盒子会上移 父盒子会发生塌陷现象.同一级盒子right浮动,同级左边的盒子需要左浮动,right浮动的盒子才能上来 由于浮动框不在文档的普通 ...
- 【html/css】模态框的实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- js+css实现模态层效果
在做web前端的时候,有些时候会涉及到模态层,在此提供一种实现思路.希望对大家实用.先贴效果吧: 模态层效果 以下说说在写模态层的时候的思路:通过可配置的參数width,height,title以及c ...
- MVC中调用模态框之后导致JS失效
今天在工作中碰到一个页面调用模态框之后,页面原来的JS失效的问题,由于前台经验较少,折腾了一天... 问题描述是这样,在页面,有两个下拉列表框A和B,做了下拉列表框联动,有一个button按钮会调用模 ...
- 轻量级Modal模态框插件cta.js
今天给大家分享一款轻量级Modal模态框插件cta.js.这是一款无需使用jQuery插件,纯js编写的模态框弹出特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <se ...
随机推荐
- AnkhSvn介绍 插件
转载:http://www.cnblogs.com/lyhabc/articles/2483011.html AnkhSVN是一款在VS中管理Subversion的插件,您可以在VS中轻松的提交.更新 ...
- jquery.base64.js
(function($) { $.base64 = function(options) { var defaults = { data:"", type:0, unicode:tr ...
- POJ Euro Efficiency 1252
Euro Efficiency Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 4109 Accepted: 1754 D ...
- js获取当前时间年份，处理年月日
js中获得当前时间年份.月份.日期 //获取完整的日期 var date=new Date; var y = date.getFullYear()var m = date.getMonth ...
- Tensorflow 学习笔记 -----tf.where
TensorFlow函数:tf.where 在之前版本对应函数tf.select 官方解释: tf.where(input, name=None)` Returns locations of true ...
- web api 特点
webapi有很多特点(我不想用优点这个词),比如说restful,支持路由,简单,类似mvc controller/action的代码编写方式,灵活的托管方式,和web的集成等等. Web API的 ...
- AtCoder Grand Contest 018 A - Getting Difference
A - Getting Difference Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem Statement ...
- vs2010 Visula C++ 把CString 转换为string 类型
CString strSomeCstring ("This is a CString Object"); // Use ANSI variant CStringA to conve ...
- JAVA配置环境
- deep-in-es6(四)
不定参数和默认参数: function containsAll(str) { for(var i = 1;i < arguments.length;i++) { var hasStr = arg ...