display: flex; /* flex 布局 */
justify-content:space-around;/* 内容布局方式 居中 */
align-items: center; /*内容水平居中显示 */

background-color: rgba(0,0,0,0.333); 灰色背景

justify-content: flex-end;在右端显示

 

<script type="text/javascript">
window.onload=function(){
var btn=document.querySelector("button"); //querySelector 可以获取ID class 标签名 通用
btn.onclick=function(){
var box=document.querySelector(".box");
box.style.display="flex";
}
var close=document.querySelector(".close");
close.onclick=function(){
var box=document.querySelector(".box");
box.style.display="none";
}
}
</script>

点击按钮 box显示，点击close box不显示。

<script type="text/javascript">
window.onload=function(){
var btns=document.querySelectorAll(".box .title a");
var forms=document.querySelectorAll(".box .text form");

for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){

for(var j = 0;j < btns.length;j++){
btns[j].className="";
}
this.className="active";

var idx=this.attributes["data-idx"].value;
for(var j = 0;j < forms.length;j++){
forms[j].style.display="none";
}
forms[idx].style.display="block";
}
}
}
</script>

切换登录 注册页面。