css和js实现弹出登录居中界面完整代码


Posted in Javascript onNovember 26, 2017

我实现的这个和许多网站上的登录弹出窗口差不多,大家举一反三,先看我写完后的结果。

css和js实现弹出登录居中界面完整代码

点击创建相册后

css和js实现弹出登录居中界面完整代码

会在这个屏幕的中间显示创建相册的表单,整个背景颜色变暗,点击右上角的X会关闭这个表单。

html代码

创建按钮

<li id="create"><a href="#form" rel="external nofollow" ><span>创建相册</span></a></li>

背景div和表单div

<div class="background"></div>

<div id="form">
  <div class="fh">
    <h1>创建相册</h1>
    <a class="close"><img src="pics/close.png" /></a>
  </div>
  ...
</div>
css代码
.background {
  display: none;
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:#fff;
  background:-moz-radial-gradient(50% 50%, #fff, #000);/*gradient for firefox*/
  background:-webkit-radial-gradient(50% 50%, #fff, #000);/*new gradient for webkit */
  background:-webkit-gradient(radial, 0 50%, 0 50%, from(#fff), to(#000));/*the old grandient for webkit*/
  opacity:0.5;
  filter:Alpha(opacity=50);
}
#form {
  display: none;
  position:fixed;
  border: 1px solid #ccc;   
  background-color:white;
  top:30%;
  left:30%;
  width: auto;
  border-radius:15px;
  -moz-border-radius:15px;
  box-shadow:0 5px 27px rgba(0,0,0,0.3);
  -webkit-box-shadow:0 5px 27px rgba(0,0,0,0.3);
  -moz-box-shadow:0 5px 27px rgba(0,0,0,0.3);
}

JavaScript代码

function showForm() {
  var create = document.getElementById("create");
  var bg = document.getElementsByClassName("background")[0];
  var form = document.getElementById("form");
  var links = document.getElementsByClassName("close");
  for(var i=0;i<links.length;i++) {
    links[i].onclick = function() {
    form.style.display = "none";
    bg.style.display = "none";
    }
  }
  create.onclick = function() {
    form.style.display = "block";
    bg.style.display = "block";
  }

主要原理是改变背景div和表单div的display属性,值为block时显示,值为none时元素消失。而position:fixed; 是相对于当前窗口的。

总结

以上所述是小编给大家介绍的css和js实现弹出登录居中界面完整代码,希望对大家有所帮助!

Javascript 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
学习jquery之一
Apr 27 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
轻松搞定js表单验证
Oct 13 Javascript
jQuery Ajax全解析
Feb 13 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
js 判断一个数字是不是2的n次方幂的实例
Nov 26 #Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 #Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 #Javascript
zTree节点文字过多的处理方法
Nov 24 #Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 #Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 #Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 #jQuery
You might like
php Mysql日期和时间函数集合
2007/11/16 PHP
介绍php设计模式中的工厂模式
2008/06/12 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
jQuery Ajax之load()方法
2009/10/12 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
Python 正则表达式入门(初级篇)
2016/12/07 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python语言描述最大连续子序列和
2017/12/05 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
Python如何急速下载第三方库详解
2020/11/02 Python
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
瀑布模型都有哪些优缺点
2014/06/23 面试题
小学生通知书评语
2014/12/31 职场文书
工程部经理岗位职责
2015/02/02 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
导游词之襄阳古城
2019/09/27 职场文书