仿腾讯微博的一个弹出框 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="width: 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。