easyDialog demo1

setTimeout，双弹层示例

by weiming le

HTML

<script src="http://xiaomingming.github.io/easyDialog/javascripts/easyDialog.js"></script>
<button id="btn1">click me</button>
<section id="main-content" class="main-content">
    <div id="easy-dialog" class="easy-dialog"></div>
    <div id="easy-dialog2" class="easy-dialog"></div>
</section>

CSS

.easy-dailog-filter {
    display: none;
    position: fixed;
    _position: absolute;
    background: #000;
    opacity:.8;
    filter: alpha(opacity=80);
    width: 100%;
    height: 100%;
    z-index: 3;
    left: 0;
    top: 0;
}
.easy-dialog {
    /*width: 300px;*/
    background: #fff;
}
.easy-dialog * {
    margin: 0;
    padding: 0;
}
.easy-dialog-header {
    position: relative;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: lightseagreen;
    color: #fff;
}
.easy-dialog-header h1 {
    position: absolute;
    line-height: 30px;
    padding-left: 20px;
    font-size: 14px;
}
.easy-dialog-close {
    position: absolute;
    right: 10px;
    font-size: 12px;
    text-decoration: none;
    color: #fff;
    line-height: 30px;
}
/*最终宽高需要自行设定*/

/*计算inner层内容的实际宽高，填充到其父层easy-dialog-content*/
 .easy-dialog-content {
    height:60px;
    background: #eee;
    color: #222;
    overflow-y: auto;
}
.easy-dialog-content .easy-dialog-content-inner {
    padding: 10px;
    font-size: 12px;
}
.easy-dialog-footer {
    position: relative;
    text-align: right;
    background: lightgray;
    height: 30px;
}
.easy-dialog-footer p {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
.easy-dialog-footer button {
    float: left;
    margin-top: 3px;
    border: 1px solid orange;
    color: #666;
    border-radius: 3px;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    overflow: visible;
    /*for ie6*/
    cursor: pointer;
    margin-left: 10px;
    _display: inline;
}
.easy-dialog-footer button.disabled {
    cursor: text;
}

JavaScript

$(function () {
    var btnEvent = function () {
        $('#easy-dialog2').easyDialog({
            'cHeight': 80,
                'dTitle': '测试标题',
            dContentTmp: function (cont) {
                $(cont).html('<p>先等待5秒哦</p>');
                return setTimeout(function () {
                    $(cont).html('<p>异步回调哦</p>');
                }, 5 * 1000);
            },
                'dCloseTxt': '[]',
            OK: function () {
                $('#easy-dialog').easyDialog({
                    'cHeight': 80,
                        'dTitle': '测试标题',
                    dContentTmp: '<p>你点开了浮层2</p>',
                        'dCloseTxt': 'close',
                    OK: function () {

                    }
                });
            }
        });
    };
    $('#btn1').on('click', btnEvent);
});