首页 > 代码库 > 仿javascript中confirm()方法的小插件

仿javascript中confirm()方法的小插件

2024-07-16 20:48:02   213人阅读

　　10天没有写博客了，不知道为什么，心里感觉挺不舒服的，可能这是自己给自己规定要去完成的事情，没有按照计划执行，总会心里不怎么舒服。最近事情挺多的，终于今天抽空来更新一下博客了。

　　今天写的是一个小插件。平时我们习惯于使用javascript中自带的confirm（）函数做出一个弹窗的效果，但是问题在于这样的弹窗非常不美观，大大降低了网页的整体效果。

　　好吧废话不多说，首先先来了解一下confirm（）函数，下面应该注释得很清楚了。

if(confirm("我们去阿里转山吧，好吗？")){//想alert()方法一样，会弹出参//数内容,不同的是,点击确定时会返回true，取消时会返回false    alert("好呀！那我们是不是应该准备点什么？");//点击确定时执行的语句}else{    alert("西藏有什么好玩的呀！还不如出国溜溜...");//点击取消时执行的语句}

　　下面是我自己编写的一个小插件，先上css

 .show_info_contain {position: fixed;top: 50%;left: 50%;margin-left: -200px;margin-top: -100px;background-color: #000;border: #9E9E9E 1px solid;border-radius: 3px;width: 400px;height: 200px;color:#fff;}.show_info_tittle {height: 40px;line-height: 40px;background-color: #333333;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: #333;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")[0]){           $(‘#contain-info-show‘).remove();           callback.call(this,true);     }else if(e.target==$("#cancel-info-show")[0]){     $(‘#contain-info-show‘).remove(); callback.call(this,false);         }   });}

调用方式

show_confirm("我们去阿里转山，好吗？",function(result){ if(result==true){ alert("好啊，我们应该准备点什么？"); }else{ alert("西藏有什么好玩的呀！不如出国溜溜..."); }});

效果图展示

 


联系
我们