使用自定义的确认框代替默认的浏览器的确认框

经常在项目使用到浏览器默认的确认框，可惜默认的确认框无法自定义样式，但是通过使用if(confirm("确定吗"))来获取返回值并进行下一步的操作有时十分必要。那么，如何自定义一个类似的能返回布尔值的函数呢？

一开始的想法是写个弹出框函数，能通过捕捉相应的点击确认和取消事件来返回true or false。however，事实是函数的执行就会一个返回true值，所以无论点击了弹出框什么按钮都返回true，无法模拟默认的浏览器确认框。

尝试使用回调函数的方法，实测可行。

关键代码如下：

<script>

/**
* @param content : 确认框中的内容
* @param callback_CANCEL ： 点击取消的回调函数
* @param callback_OK ： 点击确认的回调函数
*/
function showConfirm(content,callback_CANCEL,callback_OK){
　　　　var confirm_modal = document.createElement('article');
　　　　confirm_modal.setAttribute('id', 'alert-confirm');
　　　　confirm_modal.innerHTML='<header>自定义确认框</header><div class="confirm-content">'
　　　　 + content + '</div><footer><button id="confirm-cancel" >取消</button><button id="confirm-yes">确定</button></footer>';
　　　　document.body.appendChild(confirm_modal);

　　　　//点击取消
　　　　document.getElementById("confirm-cancel").onclick=function(){
　　　　　　document.getElementById('alert-confirm').remove();
　　　　　　if(callback_CANCEL && typeof callback_CANCEL== "function")
　　　　　callback_CANCEL( false );
　　　};

　　　　//点击确认
　　 document.getElementById('confirm-yes').onclick=function(){
　　　　document.getElementById('alert-confirm').remove();
　　　　if(callback_OK && typeof callback_OK == "function")
　　 　　　　 callback_OK( true );
　　 };
}

　　//点击弹出确认框
　document.getElementById("confirm").onclick=function(){showConfirm("这是个确认框！",function(){alert("你点击了取消")},function(){alert('你点击了确认')})};

</script>

简单写了下样式：

<style type="text/css">
#alert-confirm{
box-shadow: 2px 2px 5px #333;
border:1px solid #999;
border-radius:4px;
position: absolute;
top:50%;
left:50%;
margin-left:-200px;
margin-top:-125px;
width:400px;
height:250px;
background: #FFF;
}
header{
box-sizing:border-box;
height:40px;
width:100%;
line-height: 40px;
padding:0 10px;
font-size:16px;
font-weight:bolder;
display: block;
border-bottom: 1px solid #666;
}
.confirm-content{
line-height: 170px;
text-align: center;
height:170px;
}
footer{
box-sizing:border-box;
height:40px;
width:100%;
line-height: 40px;
font-size:16px;
font-weight:bolder;
display: block;
border-top: 1px solid #666;
text-align: center;
}
</style>

弹出框效果如下图，样式较简单粗犷，不用太吐槽：



点击确认后会执行回调函数alert('你点击了确认'), 点击取消后会执行回调函数alert('你点击了取消')，就不截图了。

同样的，要想实现alert弹出框也是类似的思路，回调callback_OK();则可。

总之，成功实现自定义确认框，若有更好的方法，请诸位不吝赐教。

　　　　　　　　　　-----------------------原创，转载请把本文链接附上 http://www.cnblogs.com/suspiderweb/