怎么用jquery+CSS实现悬浮登录框遮罩

小天博客 • 07/27 18:16 • 开发 • 阅读 31

这篇文章主要介绍了怎么用jquery+CSS实现悬浮登录框遮罩的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么用jquery+CSS实现悬浮登录框遮罩文章都会有所收获，下面我们一起来看看吧。先上效果图，阴影部分无法点击HTML代码css代码/* 半透明的遮罩层 */
.shadow {
background: #000;
filter: alpha(opacity=70); /* IE的透明度 */
opacity: 0.5; /* 透明度 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 965; /* 此处的图层要大于页面 */
}.login-box {
text-align: center;
width: 500px;
height: 350px;
border-radius: 10px;
/*border: 3px solid gainsboro;*/
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50免费云主机域名%, -50%);
background: #ffe3e1;
-webkit-box-shadow: #666 0 0 6px;
-moz-box-shadow: #666 0 0 6px;
box-shadow: #fff8e7 0 0 6px 6px;
z-index: 996; /* 此处的图层要大于遮罩图层 */
}jQuery代码//登录，点击登录显示登录框
$(“#login-link”).click(function () {
$(“#login-box”).show();
$(“#shadow”).show();
});
//关闭登录框，点击关闭按钮关闭
$(“#close-login-btn”).click(function () {
$(“#login-box”).hide();
$(“#shadow”).hide();
});
关于“怎么用jquery+CSS实现悬浮登录框遮罩”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么用jquery+CSS实现悬浮登录框遮罩”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注百云主机行业资讯频道。

相关推荐: Ant Design Vue Pagination分页组件怎么封装与使用

这篇文章主要讲解了“AntDesignVuePagination分页组件怎么封装与使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“AntDesignVuePagination分页组件怎么封装与使用”吧！今天封…