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

经常在项目使用到浏览器默认的确认框，可惜默认的确认框无法自定义样式，但是通过使用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/