如何实现一个自定义的弹出框

.ewb-mesgbox {
    position: relative;
    width: 500px;
    background-color: #fff;
}

.ewb-msgbox-hd {
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 20px;
    background-color: #f5f5f5;
}

.ewb-colse {
    display: block;
    width: 14px;
    height: 14px;
    font-size: 14px;
    color: #999;
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 9999;
    cursor: pointer;
    background: url(../images/close_btn.png) center center no-repeat;
}

.ewb-msgbox-notice {
    height: 140px;
    line-height: 140px;
    font-size: 16px;
    color: #104382;
    text-align: center;
}

.ewb-msgbox-bd2 {
    padding: 34px 0;
}

.ewb-msgbox-notice2 {
    font-size: 16px;
    color: #104382;
    text-align: center;
    line-height: 24px;
}

然后创建一个在html文件中去新增一个模板:

    <script type="text/x-template" id="msgbox">
        <div class="ewb-mesgbox">
            <span class="ewb-colse"></span>
            <div class="ewb-msgbox-hd">提示</div>
            <div class="ewb-msgbox-bd">
                <p class="ewb-msgbox-notice">对不起，........！</p>
            </div>
        </div>
    </script>

我们在页面中引入layer插件

  open($('#msgbox'));

就可以弹出比较好看的框：

希望对你有所帮助