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 相关文章推荐
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
js获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
javascript回调函数详解
Feb 06 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
JS实现简单日历特效
Jan 03 Javascript
Vue vee-validate插件的简单使用
Jun 22 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
php实现分页工具类分享
2014/01/09 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
PHP小技巧之函数重载
2014/06/02 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
详解微信UnionID作用
2019/05/15 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
如何将Pycharm中调整字体大小的方式设置为&quot;ctrl+鼠标滚轮上下滑&quot;
2020/11/17 Python
Whistles官网:英国女装品牌
2020/08/14 全球购物
2014年大学生自我评价
2014/01/19 职场文书
运动会通讯稿300字
2014/02/02 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
Django路由层如何获取正确的url
2021/07/15 Python
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS