插件使用jquery编写，使用方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$.dialog.init({ width:260, //宽 height:150, //高 background:"#1F53A0", //背景色 border:"1px solid #111", //边框 title:"操作提示", //弹出框title sure:"确定", //确定按钮文字 cancel:"取消", //取消按钮文字 content:"您确定执行当前的操作吗?", //弹出框提示内容 drag:true, //是否可拖动 overlayClose:false, //是否点击阴影层关闭 autoHeight:false //是否自动高度，建议当弹出层文字较多时设置为true callback:function(ok){ //回调函数 if(ok){ alert("您点击的是确定按钮哦");//点击确定按钮后执行的回调 }else{ alert("您点击的是取消按钮哦");//点击确定按钮后执行的回调 }; } }); |
由于个人不是美工，自定义的样式特别难看，弹出框的基本布局如下，
|
1 2 3 4 5 6 7 8 9 |
var $dialog = $("<div id='dialog'>"+ " <div class='title'>"+opts.title+"</div>"+ " <a href='javascript:void(0);' class='close'>×</a>"+ " <div class='content'>"+opts.content+"</div>"+ " <p>"+ " <a href='javascript:void(0);' class='btn sure'>"+opts.sure+"</a>"+ " <a href='javascript:void(0);' class='btn cancel'>"+opts.cancel+"</a>"+ " </p>"+ "</div>"); |
然后你就可以根据自己的喜欢自定义样式了。
|
1 2 3 4 5 6 7 8 |
#dialog{width:260px;background:#33ccff;position:fixed;z-index:100;} #dialog a{text-decoration:none;color:#fff;text-decoration:none;} #dialog .title{height:30px;padding-left:10px;line-height:30px;font-size:16px;border-bottom:2px solid #fff;cursor:move;} #dialog .close{font-size:22px;position:absolute;top:0px;right:10px;} #dialog .content{padding:20px 10px;} #dialog p{display:block;width:100%;text-align:center;padding-bottom:10px;position:absolute;bottom:0px;} #dialog .btn{height:30px;padding:0 5px;line-height:30px;margin:0 20px;background:rgba(0,0,0,.3);} .overlay{width:100%;height:100%;position:fixed;background:rgba(0,0,0,.3);} |
默认参数如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//默认参数 $.dialog.defaults = { width:260, height:150, background:"#1F53A0", border:"1px solid #111", title:"操作提示", sure:"确定", cancel:"取消", content:"您确定执行当前的操作吗?", drag:true, overlayClose:false, autoHeight:false }; |
如果你想弹出框只有一个按钮，可以使用
|
1 2 3 |
$.dialog.alert({ //你的参数设置 }) |
不要按钮，可以使用
|
1 2 3 |
$.dialog.sure({ //你的参数设置 }) |
具体效果你可以点击下面的按钮进行查看。(js代码已经写在了演示页面底部的javascript区了，需要的朋友，只需新建一个js文件，将其复制过去，然后在你的页面引入你的js，就可以使用了。当然，作为新手，在大神眼里，我这个未免封装得太烂了，还望莫笑)。
发表评论