仿腾讯微博的一个弹出框 v0.1 beta
代码写的不太好，新手请大家海涵，只为博君一笑，勿放在心上。
写在这里留作纪念，也许以后用的到。
效果
CSS
.prompt{ position: absolute; background: white; width: 330px; height: 187px; display: none; } .prompt i{ background: url(../images/ui_i_pic_.png) no-repeat; width: 32px; height: 32px; display: block; float: left; margin-right: 10px; } .prompt span{ font-size: 14px; font-weight: bold; line-height: 32px; } .prompt .ok{ background: url(../images/button_03.gif) no-repeat; color: white; clear: left; } .prompt .cancel{ background: url(../images/button_05.gif) no-repeat; color: black; margin-left: 10px; } .prompt a{ float: left; font-size: 12px; width: 65px; height: 23px; display: block; line-height: 23px; text-decoration: none; text-align: center; } .prompt .buttons{ margin: 50px 0 0 42px; } .prompt b{ position: absolute; background: black; opacity: 0.2; } .prompt .left{ left: 0; top: 4px; height: 179px; width: 4px; } .prompt .top{ top: 0; height: 4px; width: 330px; } .prompt .right{ right: 0; top: 4px; height: 179px; width: 4px; } .prompt .bottom{ bottom: 0; height: 4px; width: 330px; } .prompt .warning{ background-position: -34px 0; } .prompt .success{ background-position: 0 0; } .prompt .information{ background-position: -68px 0; } .prompt .inner{ margin: 40px 60px 40px; }
JS
(function ($) { $.extend({ prompt: function (text, type, ok, cancel) { var prompt = $('<div class="prompt"><b class="left"></b><b class="right"></b><b class="top"></b><b class="bottom"></b><div class="inner"><i class=" + type + "></i><span>' + text + '</span><div class="buttons"><a class="ok" href="#">是</a><a class="cancel" href="#">否</a></div></div></div>').appendTo('body'); prompt.css({ left: ($(window).width() - prompt.width()) / 2, top: ($(window).height() - prompt.height()) / 2 }).show(); prompt.find('.ok').bind('click', ok); prompt.find('.cancel').bind('click', cancel); return prompt; } }); })(jQuery);
HTML和使用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script type="text/javascript" src="js/prompt.t.qq.com.min.js"></script> <link rel="stylesheet" type="text/css" href="css/prompt.t.qq.com.min.css" /> <style type="text/css"> body{ margin: 0; padding: 0; } .content{ width: 960px; margin: 0 auto; margin-top: 200px; } </style> <script type="text/javascript"> $(function () { $('a').click(function () { var prompt = $.prompt('您确定放弃本次编辑？', 'information', function () { alert('您点击了确定按钮'); }, function () { prompt.fadeOut(function () { prompt.remove(); }); }); }); }); </script> </head> <body> <div class="content"> <textarea style=" 500px;height: 200px;"></textarea> <a href="#" style="display: block;">点击我出现窗口</a> </div> </body> </html>
参数1 显示内容
参数2 图标类型 information success warning
参数3 点击[是]的事件
参数4 点击[否]的事件
代码在此,供上,希望能帮助大家.
IE的透明度使用filter:alpha(opacity=xx),我没写IE的直接用了chrome的opacity，有空我再加上，希望您使用的时候要注意兼容IE。