10天没有写博客了，不知道为什么，心里感觉挺不舒服的，可能这是自己给自己规定要去完成的事情，没有按照计划执行，总会心里不怎么舒服。最近事情挺多的，终于今天抽空来更新一下博客了。
今天写的是一个小插件。平时我们习惯于使用javascript中自带的confirm（）函数做出一个弹窗的效果，但是问题在于这样的弹窗非常不美观，大大降低了网页的整体效果。
好吧废话不多说，首先先来了解一下confirm（）函数，下面应该注释得很清楚了。
if(confirm("我们去阿里转山吧，好吗？")){//想alert()方法一样，会弹出参
//数内容,不同的是,点击确定时会返回true，取消时会返回false
alert("好呀！那我们是不是应该准备点什么？");
//点击确定时执行的语句
}else{
alert("西藏有什么好玩的呀！还不如出国溜溜...");
//点击取消时执行的语句
}下面是我自己编写的一个小插件，先上css
.show_info_contain {
position: fixed;
top: %;
left: %;
margin-left: -200px;
margin-top: -100px;
background-color: #;
border: #9E9E9E 1px solid;
border-radius: 3px;
width: 400px;
height: 200px;
color:#fff;
}
.show_info_tittle {
height: 40px;
line-height: 40px;
background-color: #;
border-bottom: 1px solid #FFF;
text-align: center;
font-size: 16px;
}
.show_info_content {
padding: 20px;
font-size: 16px;
text-align: center;
margin-top: 20px;
}
.tr {
text-align: right;
}
.btn_green1 {
padding: 8px 16px;
border-radius: 2px;
color: #;
text-decoration: none;
font-size: 16px;
display:inline-block;
}
.green{
background-color: #90EB6A;
margin-right:75px;
}
.green:hover{
background-color: gray;
color:#fff;
}
.red{
background-color: #EC6868;
margin-right:80px;
}
.red:hover{
background-color: gray;
color:#fff;
}
.show_info_confirm_cancel{
margin-top:20px;
}然后是javascript
function show_confirm(info,callback){//两个参数：info为需要显示的内容,callback为回调函数
var content='<div class="show_info_contain" id="contain-info-show">'
+'<div class="show_info_tittle">Prompt</div>'
+'<div class="show_info_content">'+info+'</div>'
+'<div class="show_info_confirm_cancel tr" id="show_info_confirm_cancel"><a href="javascript:void(0);" id="confirm-info-show" class="btn_green1 green">confirm</a><a href="javascript:void(0);" id="cancel-info-show" class="btn_green1 red">cancel</a></div>'
+'</div>';
$('body').append(content);
$('#show_info_confirm_cancel').click(function(e){
if(e.target==$("#confirm-info-show")[]){
$('#contain-info-show').remove();
callback.call(this,true);
}else if(e.target==$("#cancel-info-show")[]){
$('#contain-info-show').remove();
callback.call(this,false);
}
});
}调用方式
show_confirm("我们去阿里转山，好吗？",function(result){
if(result==true){
alert("好啊，我们应该准备点什么？");
}else{
alert("西藏有什么好玩的呀！不如出国溜溜...");
}
});效果图展示