自定义弹窗组件
HTML
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link rel="stylesheet" type="text/css" href="css/dialog.css"> <style> * { padding:0; margin:0; } </style> <title>弹窗组件</title> </head> <body> <a href="javascript:;" class="btn">弹窗</a> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/dialog.js"></script> <script type="text/javascript"> $(".btn").click(function() { $.dialog({ title:"提示", content:"确定关闭？", callback : function(ok) { if (ok) { alert(true); } else { alert(false); } } }); }); </script> </body> </html>
JS
$.dialog = function(opts) { var $dialog = $("<div class='dialog'>"+ "<div class='title'>"+ "<h3>"+opts.title+"</h3>"+ "<a href='javascript:;' class='close'>X</a>"+ "</div>"+ "<div class='content'>"+ "<div class='message'>"+ "<span class='icon'></span>"+ "<span class='text'>"+opts.content+"</span>"+ "</div>"+ "<div class='btn'>"+ "<input type='button' class='sure' value='确定'/> "+ "<input type='button' class='cancle' value='取消'/>"+ "</div>"+ "</div> "+ "</div>"); $("body").append($dialog).append("<div class='gray'></div>"); //弹出框居中 AutoCenter($dialog); //浏览器窗口发生改变自动居中 $(window).resize(function() { AutoCenter($dialog); }); //移动 DialogMove($dialog,opts); } function AutoCenter($dialog) { var w = $dialog.width(); var h = $dialog.height(); var l = $(window).width() - w; var t = $(window).height() - h; $dialog.css({ left:(l /2) +"px", top:(t / 2)+"px" }); } function DialogMove($dialog,opts){\ //静止选中文字 $(document).bind("selectstart",function(){return false;}); var w = $dialog.width(); var h = $dialog.height(); var le = $(document).width() - w; var to = $(document).height() - h; //拖拽 $dialog.find(".title").mousedown(function(evw) { var ev = evw || window.event; var dialogBox = $(this).parent() var _left = ev.clientX - dialogBox.offset().left; var _top = ev.clientY - dialogBox.offset().top; var flag = true; $(document).mousemove(function(eve) { if (flag) { var ev = eve || window.event; var l = ev.clientX - _left; var t = ev.clientY - _top; //防止溢出 if (t <= 0) t = 0; //top if (l <= 0) l = 0; //left if (l >= le) l = le; //bottom if (t >= to) t = to; //right dialogBox.css({left:l,top:t}); } }).mouseup(function() { flag = false; }); }); //关闭按钮 $dialog.find(".close").click(function() { $dialog.remove(); $(".gray").remove(); }); //确定按钮 $dialog.find(".sure").click(function() { if (opts.callback) { $dialog.remove(); $(".gray").remove(); opts.callback(true); } }); //取消按钮 $dialog.find(".cancle").click(function() { if (opts.callback) { opts.callback(false); } }); }
CSS
.gray { position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); } .dialog { position:absolute; left:200px; top:200px; width:273px; height:167px; background:#EEF3FA; z-index:9999; } .title { cursor:move; height:20px; padding:10px 15px; background:#119da9; color:#FFF; font-size:14px; } .title h3 { float:left; } .title a { float:right; font-size:18px; } .message { padding:18px 40px; } .message .text { color:#aaa; font-size:14px; margin:12px 0 0 22px; } .btn { text-align:center; } .btn input { outline:none; width:100px; height:30px; border:1px solid #119da9; background:#FFF; transition:.3s; } .btn input:hover { background:#119da9; cursor:pointer; color:white; }
