使用jQuery實現，點擊顯示彈框，背景虛化，點擊空白處，彈框消失

1、HTML的代碼

<div class="layer" id="back" style="display: none; position:absolute; width:100%; height: 100%; top: 0; left: 0; z-index: 2; background: rgba(255, 255, 255, .6);" disabled="disabled"></div>   <!-- 虛化層 -->

    <div class="container">
        <div id="showRename" style="display:none; width:30%; position:absolute; top: 300px; left: 380px;box-shadow: 0 0 5px #ccc;z-index: 9;">   <!-- 要顯示的 -->
            <div class="input-group" >
                <input type="text" id="oldname" class="form-control" />
                <span class="input-group-addon" οnclick="getValue()">重命名</span>
            </div>
            <input type="hidden" id="newname" class="form-control">
        </div>

<a href="javascript:void(0);" class="btn" id="renameClick" >重命名</a>   <!-- 點擊它顯示 -->

2、js代碼

$("#renameClick").click(function(e) {
            e.stopPropagation();   // 阻止冒泡
            $('#back').css("display", "block");   // 顯示
            $("#showRename").css("display", "block");

            $("#back").bind("click", function(e) {   // 相當於點擊空白消失
                $('#back').css("display", "none");
                $("#showRename").css("display", "none");
            });
        });

3、效果