js-自定义对话框

引用插件

<link rel="stylesheet" type="text/css" href="${ctx }/resources/common/css/xcConfirm.css"/>
<script type="text/javascript" src="${ctx }/resources/jquery-1.11.3/jquery-1.11.3.js" charset="utf-8"></script>
<script type="text/javascript" src="${ctx }/resources/common/js/xcConfirm.js" charset="utf-8"></script>

对话框：点击确定按钮后进行回调

dataSource = function (res) {
      if (res) {
                  //执行代码
          }
      }
 var res = showConfirmDialog("提示",data.msg,"0011",dataSource);

//提示对话框
    function showConfirmDialog(title,message,flag,dataSource) {
        var txt=  message;
        var option = {
            title: title,
            btn: parseInt(flag,2),//("0001",2)-确定按钮 ("0010",2)-取消按钮 ("0011",2)-确定&&取消
            onOk: function(){
                if (dataSource != undefined && dataSource != null)
                    dataSource("ok");
            }
        }
        window.wxc.xcConfirm(txt, "custom", option);
    }

效果：

xcConfirm.css

/*垂直居中*/
.verticalAlign{ vertical-align:middle; display:inline-block; height:100%; margin-left:-1px;}

.xcConfirm .xc_layer{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #666666; opacity: 0.5; z-index: 2147000000;}
.xcConfirm .popBox{position: fixed; left: 50%; top: 50%; background-color: #ffffff; z-index: 2147000001; width: 570px; height: 300px; margin-left: -285px; margin-top: -150px; border-radius: 5px; font-weight: bold; color: #535e66;}
.xcConfirm .popBox .ttBox{height: 50px; line-height: 30px; padding: 14px 30px; border-bottom: solid 1px #eef0f1;}
.xcConfirm .popBox .ttBox .tt{font-size: 18px; display: block; float: left; height: 30px; position: relative;}
.xcConfirm .popBox .ttBox .clsBtn{display: block; cursor: pointer; width: 22px; height: 22px; position: absolute; top: 22px; right: 30px; background: url(../img/close1.png) 0px 0px no-repeat;}
.xcConfirm .popBox .txtBox{margin: 40px 100px; height: 100px; overflow: hidden;}
.xcConfirm .popBox .txtBox .bigIcon{float: left; margin-right: 20px; width: 48px; height: 48px; background-image: url(../img/close1.png); background-repeat: no-repeat; background-position: 48px 0;}
.xcConfirm .popBox .txtBox p{ height: 84px; margin-top: 16px; line-height: 26px; overflow-x: hidden; overflow-y: auto;font-size:20px;}
.xcConfirm .popBox .txtBox p input{width: 364px; height: 30px; border: solid 1px #eef0f1; font-size: 18px; margin-top: 6px;}
.xcConfirm .popBox .btnArea{border-top: solid 1px #eef0f1;}
.xcConfirm .popBox .btnGroup{float: right;}
.xcConfirm .popBox .btnGroup .sgBtn{margin-top: 14px; margin-right: 10px;}
.xcConfirm .popBox .sgBtn{display: block; cursor: pointer; float: left; width: 100px; height: 50px; line-height: 50px; text-align: center; color: #FFFFFF; border-radius: 5px;font-size:18px;}
.xcConfirm .popBox .sgBtn.ok{background-color: #ed4346; color: #FFFFFF;}
.xcConfirm .popBox .sgBtn.cancel{background-color: #A09D9D; color: #FFFFFF;}

xcConfirm.js

/*
 * 使用说明:
 * window.wxc.Pop(popHtml, [type], [options])
 * popHtml:html字符串
 * type:window.wxc.xcConfirm.typeEnum集合中的元素
 * options:扩展对象
 * 用法:
 * 1. window.wxc.xcConfirm("我是弹窗<span>lalala</span>");
 * 2. window.wxc.xcConfirm("成功","success");
 * 3. window.wxc.xcConfirm("请输入","input",{onOk:function(){}})
 * 4. window.wxc.xcConfirm("自定义",{title:"自定义"})
 */
(function($){
    window.wxc = window.wxc || {};
    window.wxc.xcConfirm = function(popHtml, type, options) {
        var btnType = window.wxc.xcConfirm.btnEnum;
        var eventType = window.wxc.xcConfirm.eventEnum;
        var popType = {
            info: {
                title: "信息",
                icon: "0 0",//蓝色i
                btn: btnType.ok
            },
            success: {
                title: "成功",
                icon: "0 -48px",//绿色对勾
                btn: btnType.ok
            },
            error: {
                title: "错误",
                icon: "-48px -48px",//红色叉
                btn: btnType.ok
            },
            confirm: {
                title: "提示",
                icon: "-48px 0",//黄色问号
                btn: btnType.okcancel
            },
            warning: {
                title: "警告",
                icon: "0 -96px",//黄色叹号
                btn: btnType.okcancel
            },
            input: {
                title: "输入",
                icon: "",
                btn: btnType.ok
            },
            custom: {
                title: "",
                icon: "",
                btn: btnType.ok
            }
        };
        var itype = type ? type instanceof Object ? type : popType[type] || {} : {};//格式化输入的参数:弹窗类型
        var config = $.extend(true, {
            //属性
            title: "", //自定义的标题
            icon: "", //图标
            btn: btnType.ok, //按钮,默认单按钮
            //事件
            onOk: $.noop,//点击确定的按钮回调
            onCancel: $.noop,//点击取消的按钮回调
            onClose: $.noop//弹窗关闭的回调,返回触发事件
        }, itype, options);

        var $txt = $("<p>").html(popHtml);//弹窗文本dom
        var $tt = $("<span>").addClass("tt").text(config.title);//标题
        var icon = config.icon;
        var $icon = icon ? $("<div>").addClass("bigIcon").css("backgroundPosition",icon) : "";
        var btn = config.btn;//按钮组生成参数

        var popId = creatPopId();//弹窗索引

        var $box = $("<div>").addClass("xcConfirm");//弹窗插件容器
        var $layer = $("<div>").addClass("xc_layer");//遮罩层
        var $popBox = $("<div>").addClass("popBox");//弹窗盒子
        var $ttBox = $("<div>").addClass("ttBox");//弹窗顶部区域
        var $txtBox = $("<div>").addClass("txtBox");//弹窗内容主体区
        var $btnArea = $("<div>").addClass("btnArea");//按钮区域

        var $ok = $("<a>").addClass("sgBtn").addClass("ok").text("确定");//确定按钮
        var $cancel = $("<a>").addClass("sgBtn").addClass("cancel").text("取消");//取消按钮
        var $input = $("<input>").addClass("inputBox");//输入框
        var $clsBtn = $("<a>").addClass("clsBtn");//关闭按钮

        //建立按钮映射关系
        var btns = {
            ok: $ok,
            cancel: $cancel
        };

        init();

        function init(){
            //处理特殊类型input
            if(popType["input"] === itype){
                $txt.append($input);
            }

            creatDom();
            bind();
        }

        function creatDom(){
            $popBox.append(
                $ttBox.append(
                    $clsBtn
                ).append(
                    $tt
                )
            ).append(
                $txtBox.append($icon).append($txt)
            ).append(
                $btnArea.append(creatBtnGroup(btn))
            );
            $box.attr("id", popId).append($layer).append($popBox);
            $("body").append($box);
        }

        function bind(){
            //点击确认按钮
            $ok.click(doOk);

            //回车键触发确认按钮事件
            $(window).bind("keydown", function(e){
                if(e.keyCode == 13) {
                    if($("#" + popId).length == 1){
                        doOk();
                    }
                }
            });

            //点击取消按钮
            $cancel.click(doCancel);

            //点击关闭按钮
            $clsBtn.click(doClose);
        }

        //确认按钮事件
        function doOk(){
            var $o = $(this);
            var v = $.trim($input.val());
            if ($input.is(":visible"))
                config.onOk(v);
            else
                config.onOk();
            $("#" + popId).remove();
            config.onClose(eventType.ok);
        }

        //取消按钮事件
        function doCancel(){
            var $o = $(this);
            config.onCancel();
            $("#" + popId).remove();
            config.onClose(eventType.cancel);
        }

        //关闭按钮事件
        function doClose(){
            $("#" + popId).remove();
            config.onClose(eventType.close);
            $(window).unbind("keydown");
        }

        //生成按钮组
        function creatBtnGroup(tp){
            var $bgp = $("<div>").addClass("btnGroup");
            $.each(btns, function(i, n){
                if( btnType[i] == (tp & btnType[i]) ){
                    $bgp.append(n);
                }
            });
            return $bgp;
        }

        //重生popId,防止id重复
        function creatPopId(){
            var i = "pop_" + (new Date()).getTime()+parseInt(Math.random()*100000);//弹窗索引
            if($("#" + i).length > 0){
                return creatPopId();
            }else{
                return i;
            }
        }
    };

    //按钮类型
    window.wxc.xcConfirm.btnEnum = {
        ok: parseInt("0001",2), //确定按钮
        cancel: parseInt("0010",2), //取消按钮
        okcancel: parseInt("0011",2) //确定&&取消
    };

    //触发事件类型
    window.wxc.xcConfirm.eventEnum = {
        ok: 1,
        cancel: 2,
        close: 3
    };

    //弹窗类型
    window.wxc.xcConfirm.typeEnum = {
        info: "info",
        success: "success",
        error:"error",
        confirm: "confirm",
        warning: "warning",
        input: "input",
        custom: "custom"
    };

})(jQuery);

原文地址：https://www.cnblogs.com/lijianda/p/9085982.html

时间： 2024-10-13 15:03:55

js-自定义对话框的相关文章

炫酷JQUERY自定义对话框插件JDIALOG_JDIALOG弹出对话框和确认对话框插件

多种类型自定义对话框插件jDialog是一款基于jquery实现的轻量级多种类型的自定义对话框插件在项目开发中.一般会美化 alert(); 的样式.那么今天我就和大家分享一款非常炫的插件先来看一下程序最后的效果图片吧下面是HTMl代码 <center> <button id="test1">alert方式调用</button> <br/><br/> <button id="test2">

jquery自定义对话框alert、confirm和prompt

jQuery Alert Dialogs,又一个基于jQuery的提示框插件,主要包括Alert.Confirm.prompt这三种,还有一个高级范例,可以在提示框内嵌入HTML语言,可以自定义风格样式.jQuery的提示框插件有很多种,每一款都是出自不同的高人之手,因此都比较有自己的特点,包括风格和使用方法等.效果体验:http://keleyi.com/keleyi/phtml/jqplug/ 英文版:http://keleyi.com/keleyi/phtml/jqplug/1.htm 这

js自定义弹出框

js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="text/css" > .layout { width:2000px; height:400px; border:solid 1px red; text-align:center; } </style> <script type="text/javascript&quo

View（视图）——对话框之自定义对话框

一.自定义对话框 1.不能直接实例化使用 2.使用内部构造器来生成对话框 3.new AlertDialog.Builder(context) 实例化构造器 1-setTitle (标题) 2-setMessage (消息) 3-按钮 1°确认按钮 setPositiveButton(“文字”,点击事件监听器) 2°否认按钮 setNegativeButton(“文字”,点击事件监听器) 3°中立按钮 setNeutralButton(“文字”,点击事件监听器) 4-show() 创建

Android开发学习笔记-自定义对话框

系统默认的对话框只能显示简单的标题内容以及按钮,而如果想要多现实其他内容则就需要自定义对话框,下面是自定义对话框的方法. 1.先定义对话框的模版 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="300d

android 自定义对话框

新建一个布局文件 my_dialog.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match

在js自定义函数中使用$(event.target)代替$(this)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

Android—关于自定义对话框的工具类

开发中有很多地方会用到自定义对话框,为了避免不必要的城府代码,在此总结出一个工具类. 弹出对话框的地方很多,但是都大同小异,不同无非就是提示内容或者图片不同,下面这个类是将提示内容和图片放到了自定义函数的参数中,并且是静态,可以用类直接调用此函数. public class MyAutoDialogUtil { private static AlertDialog dialog; /** * * @param context * 上下文 * @param text * 自定义显示的文字 * @p

Android实例-手机安全卫士（十）-自定义对话框

一.目标. 当点击“手机防盗”时弹出自定义的设置密码对话框.如果已经设置密码,则弹出自定义的输入密码对话框. 二.代码实现. 1.在layout文件夹下新建xml(取名setpwddialog.xml)文件用于设置自定义对话框的UI. 新建xml文件代码如下; 1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.a

软键盘挡住自定义对话框中的内容

在自定义的对话框中有EditText,获取焦点的时候弹出软键盘很可能会挡住对话框中的一些按钮或其他内容. 可以在自定义对话框中的oncreate()方法中设置软键盘的模式,如下 getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE | WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN); 当软键盘弹出时,弹出