jquery widgets 弹框

最新推荐文章于 2025-09-07 22:29:54 发布

转载最新推荐文章于 2025-09-07 22:29:54 发布 · 70 阅读

文章标签：

#javascript #ViewUI

本文介绍了一个使用jQuery插件实现的自定义对话框功能，包括显示、关闭操作及验证码验证等特性。

<div id='dialog' style="display:none;">
    <div style="text-align:center;">
        <h3 style="color: red; padding: 8px; margin-top: -12px;">请确认是否重置假日信息</h3>
        <input style="margin-top:5px;width:80px;" id="yzm" />&nbsp;验证码：<span id="jsYzm"></span>
        <br /><br />
        <button id="btnEnter" style="cursor:pointer" class="btn btn-default">确定</button>
        <button id="btnCancel" style="cursor:pointer" class="btn btn-default">取消</button>
    </div>
</div>

jqxWindow("#dialog", "&nbsp;", 360, "auto");

function jqxWindow(selector, title, width, height, icon) {
    $(selector).show();
    $(selector).removeClass("hide");
    if ($(selector).find(".jqx-window-content").size() > 0) {
        $(selector).jqxWindow("open");
    } else {
        $(selector).jqxWindow({ width: width, height: height, isModal: true, modalOpacity: 0.3, resizable: false, maxWidth: 1300 });
    }
    if (icon != null) {
        title = "<i class=\"" + icon + "\" style=\"color: #F2B863;font-size: 20px; margin-right: 8px; \"></i>" + title;
    }
    $(selector).jqxWindow('setTitle', title);
    $(selector).on('close', function (event) {
        jqxValidateRemove();
    });
    $(selector).on('moving', function (event) {
        jqxValidateRemove();
    });

    $.position.center(selector);
}