扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
我实现的这个和许多网站上的登录弹出窗口差不多，大家举一反三，先看我写完后的结果。
创新互联建站长期为近1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为无为企业提供专业的网站制作、网站建设，无为网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。
点击创建相册后
会在这个屏幕的中间显示创建相册的表单，整个背景颜色变暗，点击右上角的X会关闭这个表单。
html代码
创建按钮
背景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主要原理是改变背景div和表单div的display属性，值为block时显示，值为none时元素消失。而position:fixed; 是相对于当前窗口的。
总结
以上所述是小编给大家介绍的css和js实现弹出登录居中界面完整代码，希望对大家有所帮助！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网