点击超链接，显示div并且有一层背景。。

Question

我现在要做一个效果，点击一个超链接，显示一个div，但是div下面有一层黑色的背景，并且不能点击黑色区域，div不能隐藏，只能点击取消按钮，div才隐藏请教各位大侠，帮帮忙，很急，在线等！！！！！！

Answer 1

<style type="text/css">
div{display:none}
#div2{height:120px;width:120px;background-color:black}
#div1{margin-top:10px;height:100px;width:100px;background-color:blue}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
$("div").show();
});

$("#abv").click(function(){
$("div").hide();
});
});
 </script>
 <a href="#">这个就是触发DIV的链接</a>
<input type="button" id="abv" value="取消按钮"/>
<div id="div2">
<center><div id="div1">
</div></center>
</div>

Answer 2

var Mask = function () {
    function load(id, type) {
        var jq = _render();
    };
    function unload(jq) {
        jq.remove();
    };
    function _render() {
var _div = $("<div id=\"DivNone\">""</div>").addClass("mask").appendTo("body");
        var _css = _getCss();
        _div.css(_css).fadeIn();
        return _div;
    };
    function _getCss() {
        var css = {
            display: "none",
            top: 0 + "px",
            left: 0 + "px",
            width: $(document).width() + "px",
            height: $(document).height() + "px",
            zIndex: 9999,
            opacity: 1
        };
        return css;
    };
    return {
        load: load,
        unload: unload
    };
} ();
Mask.load() //初始 加载遮罩Mask.unload()//取消

Answer 3

自己实现要考虑的问题较多，比如改变窗口大小后遮罩效果等，建议直接适用jquery的插件实现。