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 相关文章推荐
juqery 学习之四 筛选查找
Nov 30 Javascript
jQuery参数列表集合
Apr 06 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
vue递归实现树形组件
Jul 15 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实现以只读方式打开文件的方法
2015/03/16 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
javascript中对对层的控制
2006/12/29 Javascript
学习ExtJS table布局
2009/10/08 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
javascript常见操作汇总
2014/09/03 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
用js实现放大镜效果
2020/10/28 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
python中的五种异常处理机制介绍
2014/09/02 Python
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
基于Python os模块常用命令介绍
2017/11/03 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
自我评价个人范文
2013/12/16 职场文书
八年级语文教学反思
2014/02/11 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
小学科学课教学反思
2016/02/23 职场文书
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL