自定义 div 弹窗，遮罩层

css 样式

<style>
    .remarksBox{
        position:fixed;  
        left:50%;
        margin-left:-100px;
        top:50%;
        margin-top:-50px;
        border: 1px solid red;
        width: 200px;
        height: 100px;
        display: none;
        text-align: center;
        z-index: 1000;/* 要比遮罩层大 */
    }
    /* 遮罩层 */
    .mask{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        display: none;
        z-index: 999;
    }
</style>

html 代码

<div class="remarksBox">
            <textarea class="remarksInfo" name="remarksInfo" value=""></textarea>
            <!--<input type="" class="remarksInfo" name="remarksInfo" value="" /><br/>-->
            <input type="button" class="commit" name="commit" value="commit"/>
            <input type="button" class="cancel" name="cancel" value="cancel"/>
        </div>
        <div class="mask"></div>

js 代码

function showRemarks(){
            $(".remarksBox").show();
        }
        $(function(){
            $(".commit").click(function(){
                $(".remarksBox").hide();
            });
            $(".cancel").click(function(){
                $(".remarksBox").hide();
            })
        })