当前位置：模板网首页 > 特效插件 > 表格图层 >  jQuery遮罩半透明背景正文

特效介绍

jQuery遮罩半透明背景框弹出框，可以动态显示后台内容。

使用方法

1、在head区域引入css样式，并非全都引用，需要那种效果就引用哪段css样式：

<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">       
    .pop_box{width: 640px;height: 455px;z-index: 999999999; margin: 37px auto 0; display: none;position: absolute;background: #FFF;  background: url(images/eventsAdvertisingBg.png) no-repeat; overflow:hidden }        
    .p_box_body{clear: both;padding: 5px 5px 5px 5px; height:100%; }
    .p_head{ height:30px; background:url(images/dlg_bg.jpg) repeat-x center;cursor:move; }
    .p_h_title{float: left;height: 30px; line-height:30px;width:300px; font-size:12px;font-weight: bold; color:#fff; text-indent:10px;}
    .p_h_x{float: right; text-align:center; height: 30px; width:40px;line-height:30px;color:red ;font-size: 12px;font-weight: bold; cursor:pointer; padding-right:5px}       
    .mask{width:100%;height:100%;background:#000;opacity:.4;position:fixed;_position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);top:0;left:0;z-index:999999998}
    .piccgal{ background-color:#fff;}
     .piccgal li img{height:245px;}
    .piccgal li{ background-color:#fff; line-height:180%; padding:5px; font-family:@yahei; font-weight:500; text-align:left;color:#000;}
</style>
<script language="javascript" type="text/javascript">
$().ready(function () {
    $(".cgal").click(function () {
        /*getData($(this).attr("aval"))*/
        popupDiv();
    });
    $(".pop_box").easydrag();
    $(".pop_box").setHandler(".pop_box .p_head");
});
function popupDiv() {
    var div_obj = $("#pop_div");
    //窗口宽度,高度
    var winWidth = $(window).width();
    var winHeight = $(window).height();
    //弹出的div的宽度,高度
    var popHeight = div_obj.height();
    var popWidth = div_obj.width();
    div_obj.animate({ opacity: "show", left: (winWidth - popWidth) / 2, top: (winHeight - popHeight) / 2, width: popWidth, height: popHeight }, 300);
    $("#mask").show();
}
function hideDiv() {
    $("#pop_div").animate({ opacity: "hide" }, 300);
    $("#mask").hide();
}
/*function getData(id) {
    var queryString = "/GetNewsInfo.ashx?id=" + id + "&rd=" + Math.random();
    $("#p_b_body").html("<div class=\"divMs\">数据加载中。。。</div>");
    $.get(queryString, null, function (data) {
        if (data != null) {
            $("#p_b_body").html(data);
        }
    });
}*/
</script>

2、在需要点击弹出本弹出层的地方加class="您自定义的类名"，然后更改调用代码“$(".cgal").click”的“cgal”为"您自定义的类名"即可。

关于动态获取弹出层内容：在调用代码中，有两处注释：
一处为：

getData($(this).attr("aval"))

二处为：

function getData(id) {
    var queryString = "/GetNewsInfo.ashx?id=" + id + "&rd=" + Math.random();
    $("#p_b_body").html("<div class=\"divMs\">数据加载中。。。</div>");
    $.get(queryString, null, function (data) {
        if (data != null) {
            $("#p_b_body").html(data);
        }
    });
}

这两处是动态获取内容的代码，删除注释，稍加修改即可实现动态调用。

jQuery遮罩半透明背景框弹出框效果预览 jQuery遮罩半透明背景框弹出框本地下载