A dialog jquery-plugin for mobile site, easy, simple.
<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!