本文介绍如何使用CSS和JavaScript实现一个居中显示的弹出表单界面。通过控制背景遮罩层和表单容器的display属性，结合position:fixed实现固定定位，点击按钮显示、关闭按钮隐藏，适用于登录或创建内容等场景。
CSS与JavaScript实现居中弹出表单界面
本文演示的弹出窗口效果与常见网站类似，读者可参考实现思路。先查看最终效果。
当用户点击“创建相册”按钮后
页面中央会显示创建相册的表单，同时背景变暗。点击右上角的关闭图标即可退出该表单。
HTML结构代码
触发按钮部分
<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="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";
}核心思路是切换背景遮罩层和表单容器的display属性：设为block时显示，设为none时隐藏。其中position:fixed用于使元素相对于浏览器窗口固定定位。
总结
以上即为CSS与JavaScript实现居中弹出表单的完整代码示例，希望对你有帮助。