前端：两种实现带背景遮罩的弹窗写法

最新推荐文章于 2024-05-12 14:31:03 发布

y_keven

最新推荐文章于 2024-05-12 14:31:03 发布

阅读量1.1w

点赞数 6

分类专栏： JS 文章标签：杨凯 js jqModal jquery

本文链接：https://blog.csdn.net/yangkai_hudong/article/details/46051149

版权

本文介绍了两种在前端实现带背景遮罩的弹窗方法。第一种利用CSS和jQuery，详细列举了对应的css文件和js文件内容。第二种方法是使用jqModal插件，提供了jqModal的官方网址及文件下载链接，并展示了如何在Html页面中应用。

摘要由CSDN通过智能技术生成

1. 第一种使用css+jquery实现效果

直接上案例分析，下面一一列出样式文件和js文件以及html页面上的使用例子。

css文件如下：

.black_overlay{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.dialog_content {
	display: none;
	position: fixed;
	top: 30%;
	left: 30%;
	background-color: white;
	z-index: 1002;
	overflow: auto;
	border: 5px solid #ADD8E6;
	padding: 10px 10px 10px 10px;
}

js文件如下：

/**
 * 弹出隐藏层
 * 
 * @param bg_div
 */
function ShowDiv(bg_div, show_div) {
	$("#" + bg_div).show();
	$("#" + show_div).show();
};
/**
 * 关闭弹出层
 * 
 * @param bg_div
 */
function CloseDiv(bg_div, show_div) {
	$("#" + bg_div).hide();
	$("#" +