宝哥软件园

css和射流研究…实现弹出登录居中界面完整代码

编辑:宝哥软件园 来源:互联网 时间:2021-09-03

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

这里写图片描述

点击创建相册后

这里写图片描述

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

超文本标记语言代码

创建按钮

Li id=' create ' a href=' # form ' rel='外部无跟随' span创建相册/span/a/li背景差异和表单差异

div class=' background '/div div id=' form ' div class=' FH ' h1创建相册/h1 a class=' close ' img src=' http : pics/close。png '/a/div./divcss代码。背景{显示:无;位置:固定;top:0pxleft:0px宽度:100%;高度:100%;背景-color : # fff;背景:-moz-径向梯度(50% 50%,#fff,# 000);/*火狐的渐变*/background :-web套件-径向-渐变(50% 50%,#fff,# 000);/*网络工具包的新渐变*/background :-web套件-渐变(径向,0 50%,0 50%,从(#fff)到(# 000));/*网络工具包的旧grand ent */opa city 33600.5;filter:Alpha(不透明度=50);} # form { display:无位置:固定;border: 1px固体# ccc背景-颜色:白色;top:30左侧:30%;宽度:自动;边界半径:15像素;-moz-border-radius :15 px;box-shadow:0 5px 27px rgba(0,0,0,0.3);-web kit-box-shadow :0 5px 27px rgba(0,0,0,0.3);-moz-box-shadow :0 5px 27px rgba(0,0,0,0.3);}JavaScript代码

函数show form(){ var create=document。getelementbyid(' create ');var BG=文档。getelementsbyclassname(' background ')[0];var form=文档。getelementbyid(' form ');var links=文档。getelementsbyclassname(' close ');for(var I=0;ilinks . LengiI){ link[I].onclick=function(){ form。风格。显示='无';BG。风格。显示='无';} }创建。onclick=function(){ form。风格。display=' blockBG。风格。display=' block}主要原理是改变背景差异和表单差异的显示属性,值为街区时显示,值为没有人时元素消失。而位置:固定;是相对于当前窗口的。

总结

以上所述是小编给大家介绍的钢性铸铁和射流研究…实现弹出登录居中界面完整代码,希望对大家有所帮助!

更多资讯
游戏推荐
更多+