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 相关文章推荐
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
JS中多层次排序算法的实现代码
Jan 06 Javascript
ant design vue的form表单取值方法
Jun 01 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
单点登录 Ucenter示例分析
2013/10/29 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
浅析matlab中imadjust函数
2020/02/27 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
村优秀党员事迹材料
2014/01/15 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
考试作弊检讨书
2014/10/21 职场文书
小学家长通知书评语
2014/12/31 职场文书
勇敢的心观后感
2015/06/09 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书