我想用HTML实现这个效果！

就是点击登录以后后面页面改变颜色,希望各位大佬求解,或者资源网站
图片说明

这个不是变色，是上面覆盖了一层半透明的黑色图层
有些网页你向下拉，就能发现是这样的，只要图层够长，对话框保持在窗口中间，就是这个效果。

可以了解一下bootstrap的模态框

在页面上覆盖了一个灰色半透明的图层，图层上再覆盖一层自定义的控件

了解下bootstrap的modal
https://v4-alpha.getbootstrap.com/components/modal/#live-demo

底层背景相当于遮罩层,比如html中

<body>
<div>
        <div style="position: fixed; width: 100%; height: 100%;background-color: 'gray';opacity: 0.5">
            这里是遮罩层
        </div>
        <div style="z-index: 1000">
        登录内容
        </div>
</div>
</body>

这样的话就在整个可视区看到背景为灰色的图层了,然后你还可以操作登录的操作.

var i=0;/*判断点击次数的变量i*/ function show(){ var xx=document.getElementById('xx');/*获取id为xx的元素设为变量xx*/ i++; if(i==2){ i=0; xx.style.opacity=0.5; xx.style.visibility="visible";//显示 }else if(i==1){ xx.style.opacity=0; xx.style.visibility="hidden";//隐藏 } }

这是我写的,可以参考一下,上面的理解可能不够充分.

点击登录后，出现遮罩层，原生做一个遮罩层。背景灰色半透明，登录表单组件居中显示就Ok了

之前也做过类似的，我的大概步骤如下：
1.创建一个div节点，样式就是半透明的灰色（具体颜色自己调一下），position设为fixed，宽高100%
2.在div里面插入你的登录框（就是图片那种）
3.在body里面插入那个div
4.如果想要点击透明部分关闭的话，可以设置点击事件判断事件对象是不是那个div，然后body移除div

弹出框可以自己做 也可以用layer.js 很好用