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

「爱情、让人受尽委屈。」 2022-08-05 00:55 144阅读 0赞

## 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();
    	$("#" + show_div).hide();
    };
    Html页面文件：
    <div id="memoInfo" class="dialog_content" >
    <span><b>备注信息</b></span>(请不要超过200字)</br></br>
    备注：<textarea rows="2" cols="40" name="memoContent"  id="memoContent" ></textarea></br></br>
    <input type="button" value="提交" οnclick="memoApplyVip()" style="margin-left:60%;">
    <input type="button" value="取消" οnclick="CloseDiv('memoInfobg','memoInfo')" style="margin-left:10%;">
    </div>

## 2.第二种： 使用jqModal插件实现 ##

jqModal资料网站：http://jquery.iceburg.net/jqModal/

jqModal.js和jqModal.css 文件下载：

使用jqModal插件比较简单，样式和js都不需要自己实现，同样直接上案例分析：

#### Html页面文件： ####

<div id="alertBlock" class="jqmDialog">
    	   <span class="closeBox">
    <a href="javascript:$('#alertBlock').jqmHide();" class="jqmClose" style="text-decoration: none;">X</a>
    </span>
    	</div>
    Js文件：
    <link href="/css/dialogModal.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" language="javascript" src="/js/jquery-1.8.1.js"></script>
    <script type="text/javascript" language="javascript" src="/js/jqModal.js"></script>
    
    /**
    *在js初始化，初始化jqModal插件
    */
    $(function() {
    			$('#alertBlock').jqm();
    		})
    /**
    *直接做一个dialog调用函数；做一些操作
    */
    dialog function(){
    $("#alertBlock").jqmShow();
    }