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 相关文章推荐
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
jQuery中prepend()方法使用详解
Aug 11 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
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程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
python安装教程
2018/02/28 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
Python数据类型之List列表实例详解
2019/05/08 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
文秘专业自荐信
2013/10/14 职场文书
理工大学毕业生自荐信
2013/11/01 职场文书
见习期自我鉴定
2013/11/07 职场文书
文科生自我鉴定
2014/02/15 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
政府门卫岗位职责
2014/04/29 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
安全生产标语大全
2014/10/06 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
创业计划书之外语培训班
2019/11/02 职场文书