jQuery.sDialog

A dialog jquery-plugin for mobile site, easy, simple.

how to use it?

<link rel="stylesheet" href="sdialog.min.css" />
<script src="your path/jquery.js"></script>
<script src="sdialog.min.js"></script>

           //1、open a OK/Cancel Dialog
                $.sDialog({
                    skin: "block",
                    content: "添加购物车成功！",
                    okBtnText: "再逛逛",
                    cancelBtnText: "去购物车",
                    width: 250,
                    okFn: function () {
                        console.log("click 去购物车!");
                    },
                    cancelFn: function () {
                        console.log("click 再逛逛!");
                    },
                    onDestroy: function () {
                        console.log("destroy!");
                    }
                });
           //2、open a success Dialog
                $.sDialog({
                    skin: "green",
                    content: "添加购物车成功！",
                    "okBtn": false, //是否显示确定按钮
                    "cancelBtn": false, //是否显示确定按钮
                    width: 250,
                    onDestroy: function () {
                        console.log("destroy!");
                    }
                });

           //3、open a warning Dialog
                $.sDialog({
                    skin: "red",
                    content: "你输入的东西有误！",
                    "okBtn": false, //是否显示确定按钮
                    "cancelBtn": false, //是否显示确定按钮
                    width: 250,
                    onDestroy: function () {
                        console.log("destroy!");
                    }
                });
           //4、open a window Dialog
                $.sWindow({
                    title: "我的标题",//弹出框标题
                    content: '我的内容', //弹出框里面的内容，支持html标签
                    height: 330,//内容部分高度，不是整个对话框高度
                    callback: function () {
                        //加载完成后执行回调函数
                    }
                })
           //5、slide up a Menu Dialog
                $.sMenu({
                    "menus": [
                    {
                        name: "退款", class: "rf", onclick: function () {
                            console.log("点击了退款");
                        }
                    },
                    {
                        name: "退款退货", class: "rg", onclick: function () {
                            console.log("点击了退款退货");
                        }
                    }
                    ],
                    "okBtn": false, //是否显示确定按钮
                    "cancelBtnText": "取消", //取消按钮的文字
                    "cancelFn": function () {
                        console.log("点击了取消");
                    }//点击取消按钮执行的函数
                })

check out the example/example.html demo.

or

live Demo, you can use mobile phone mode to view the demo for better experience!