jQuery对话框

该插件主要将alert和confirm这两个默认的弹窗进行了美化,详见代码

;(function ($) {
    //默认参数
    var PARAMS;
    var DEFAULTPARAMS = { Title: "111", Content: "", Width: 400, Height: 300, URL: "", ConfirmFun: new Object, CancelFun: new Object };
    var ContentWidth = 0;
    var ContentHeight = 0;
    $.DialogBySHF = {
        //弹出提示框
        Alert: function (params) {
            Show(params, "Alert");
        },
        //弹出确认框
        Confirm: function (params) { Show(params, "Confirm"); },
        //弹出引用其他URL框
        Dialog: function (params) { Show(params, "Dialog") },
        //关闭弹出框
        Close: function () {
            $("#DialogBySHFLayer,#DialogBySHF").remove();
        }

    };
    //初始化参数
    function Init(params) {
        if (params != undefined && params != null) {
            PARAMS = $.extend({},DEFAULTPARAMS, params);
        }
        ContentWidth = PARAMS.Width - 10;
        ContentHeight = PARAMS.Height - 40;
    };
    //显示弹出框
    function Show(params, caller) {
        Init(params);
        var screenWidth = $(window).width();
        var screenHeight = $(window).height();
        //在屏幕中显示的位置(正中间)
        var positionLeft = (screenWidth - PARAMS.Width) / 2 + $(document).scrollLeft();
        var positionTop = (screenHeight - PARAMS.Height) / 2 + $(document).scrollTop();
        var Content = [];
        Content.push("<div id=\"DialogBySHFLayer\"></div>");
        Content.push("<div id=\"DialogBySHF\" style=\"width:" + PARAMS.Width + "px;height:" + PARAMS.Height + "px;left:" + positionLeft + "px;top:" + positionTop + "px;\">");
        Content.push("    <div id=\"Title\"><span>" + PARAMS.Title + "</span><span id=\"Close\">?</span></div>");
        Content.push("    <div id=\"Container\" style=\"width:" + ContentWidth + "px;height:" + ContentHeight + "px;\">");
        if (caller == "Dialog") {
            Content.push("<iframe frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" src=\"" + PARAMS.URL + "\" ></iframe>");
        }
        else {
            var TipLineHeight = ContentHeight - 60;
            Content.push("        <table>");
            Content.push("            <tr><td id=\"TipLine\" style=\"height:" + TipLineHeight + "px;\">" + PARAMS.Content + "</td></tr>");
            Content.push("            <tr>");
            Content.push("                <td id=\"BtnLine\">");
            Content.push("                    <input type=\"button\" id=\"btnDialogBySHFConfirm\" value=\"确定\" />");
            if (caller == "Confirm") {
                Content.push("                    <input type=\"button\" id=\"btnDialogBySHFCancel\" value=\"取消\" />");
            }
            Content.push("                </td>");
            Content.push("            </tr>");
            Content.push("        </table>");
        }
        Content.push("    </div>");
        Content.push("</div>");
        $("body").append(Content.join("\n"));
        SetDialogEvent(caller);
    }
    //设置弹窗事件
    function SetDialogEvent(caller) {
        //添加按钮关闭事件
        $("#DialogBySHF #Close").click(function () { $.DialogBySHF.Close();});
         //添加ESC关闭事件
        $(window).keydown(function(event){
            var event = event||window.event;
            if(event.keyCode===27){
                $.DialogBySHF.Close();
            }
        });
        //添加窗口resize时调整对话框位置
        $(window).resize(function(){
            var screenWidth = $(window).width();
            var screenHeight = $(window).height();
            var positionLeft = parseInt((screenWidth - PARAMS.Width) / 2+ $(document).scrollLeft());
            var positionTop = parseInt((screenHeight - PARAMS.Height) / 2+ $(document).scrollTop());
            $("#DialogBySHF").css({"top":positionTop+"px","left":positionLeft+"px"});
        });
        $("#DialogBySHF #Title").DragBySHF($("#DialogBySHF"));
        if (caller != "Dialog") {
            $("#DialogBySHF #btnDialogBySHFConfirm").click(function () {
                $.DialogBySHF.Close();
                if ($.isFunction(PARAMS.ConfirmFun)) {
                    PARAMS.ConfirmFun();
                }
            })
        }
        if (caller == "Confirm") {
            $("#DialogBySHF #btnDialogBySHFCancel").click(function () {
                $.DialogBySHF.Close();
                if ($.isFunction(PARAMS.CancelFun)) {
                    PARAMS.CancelFun();
                }
            })
        }
    }
})(jQuery);

  

时间: 2024-10-20 19:17:42

jQuery对话框的相关文章

jQuery对话框右上角带关闭&#215;

jQuery弹出可关闭遮罩层:http://hovertree.com/texiao/layer/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery对话框右上角带关闭× - 何问起</title><base target="_blank" /> <!-- Attach our

炫酷的jQuery对话框插gDialog

js有alert,prompt和confirm对话框,不过不是很美体验也不是很好,用jQuery也能实现, 体验效果:http://hovertree.com/texiao/jquery/34/ 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE

jQuery对话框插件 ThickBox

http://baike.haosou.com/doc/7607201-7881296.html 项目已经停止维护,但该插件还是不错的! ThickBox是一个基于JQuery类库的扩展,它能在浏览器界面上显示非常棒的UI框, 它可以显示单图片,多图片,ajax请求内容或链接内容. ThickBox 是用超轻量级的 jQuery 库 编写的. 压缩过 jQuery 库只15k, 未压缩过的有39k. ThickBox 的 JavaScript 代码和 CSS 文件只占12k. 所以压缩过的 jQ

几个Jquery对话框插件

项目现状 While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives. (简单翻译:即日起本团队将不再继续维护此项目,因此我们推荐您使用以下产品替代.) colorbox jQueryUI Dialog fancybox DOM window shadowbox.js -The Management. 9.30.2009 (and Paul Irish

基于jQuery带动画的超炫酷弹出对话框

这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入.上下抖动飞入等.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <h1>jQuery gDialog Plugin Exampels</h1> <button class="btn demo-1">Alert Dialog

jQuery之对话框

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-sc

一款基于jQuery外观优雅带遮罩弹出层对话框

今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件,用起来非常方便. 在线预览   源码下载 实现的代码. html代码: <center class="demo"> <button onclick="payment();">缴费提示层</button> <button onc

10款基于jquery的web前端动画特效

1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要介绍的也是一款基于jQuery的横向手风琴图片切换动画,鼠标滑过图片时即可展开,并且图片上方有文字标题,非常实用. 在线演示 源码下载 2.jQuery/CSS3渐变颜色拾取器 之前我们向大家分享过一款功能十分强大的jQuery颜色拾取器,支持透明度的选取.今天要为大家介绍的同样是一款基于jQuer

oschina jQuery 插件

jQuery 插件 jQuery自动完成插件(25) jQuery分页插件(20) jQuery 文件上传(21) jQuery 地图插件(14) jQuery对话框(109) jQuery图片展示/幻灯插件(215) jQuery图表(32) jQuery Tabs(22) jQuery UI框架(36) jQuery日期选择/日历(73) jQuery菜单(89) jQuery表单及相关(159) jQuery Tooltips(72) jQuery 树形控件(21) jQuery图像处理(