最近做了一个需要简单页面的模块,样式懒得调,找前端同学搞了个,简易可伸缩的弹框.以此文章记录,希望可以帮到遇到同样需求的后端同学.

样式如下

        .dialog {
            width: 400px;
            position: absolute;
            top: 100px;
            left: 50%;
            z-index: 10000;
            margin-left: -200px;
            border: 1px solid #ddd;
            display: block;
        }
        .dialog dd {
            padding: 15px;
            color: #999;
            background: #fff;
        }
        .dialog dt {
            line-height: 28px;
            background: rgb(204, 208, 243);
            padding-left: 15px;
            position: relative;
        }
        .dialog dt span {
            position: absolute;
            right: 10px;
            top: 0;
            color: #999;
            cursor: pointer;
            font-size: 18px;
        }

Html

<div class="dialog" id="dialog-one">
    <dl>
        <dt>标题<span οnclick="document.getElementById('dialog-one').style.display = 'none'">&times;</span></dt>
        <dd id="dialogValId"></dd>
    </dl>
</div>

默认不展示,在js中设置display为"",即可展示

        document.getElementById("dialog-one").style.display="";//隐藏