css和js实现弹出登录居中界面完整代码

<li id="create"><a href="#form" rel="external nofollow" ><span>创建相册</span></a></li>

<div class="background"></div>

<div id="form">
  <div class="fh">
    <h1>创建相册</h1>
    <a class="close"><img src="/UploadFiles/2021-04-02/close.png">

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实现弹出登录居中界面完整代码，希望对大家有所帮助！