大家知道，js弹出的警告框非常难看，这跟据浏览器自身情况又不一样。很多情况下，根据系统的整体结构，我们需要更友好，更美化的展示给用户才是最好的体验。废话不多说。

以前一直纠结，不知道怎么实现，看了人家代码也没搞清楚，后来在项目中同事的写法提醒了我，于是记下来。

实现由两种思路：

思路1：将确定和取消后需要执行的函数直接作为两个button的click事件回掉函数，有一个缺点是调用过后需要手动隐藏层

思路2：事件点击后先将帮顶在该dom上的其他事件移除，然后绑定上警告框事件，在根据用户在警告事件里的选择来确定需要执行的事件。

可能说的很绕。

下面对思路1做一个demo

<!DOCTYPE HTML>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="yanue" />
        <meta name="generator" content="www.yanue.net" />
        <meta name="copyright" content="powered by yanue" />
        <title>jquery模拟实现confirm效果的两种思路一</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
        </script>
    </head>
    <body style='font-size:12px;font-family:"microsoft yahei";color:#333;'>
        <h1>jquery模拟实现confirm效果的两种思路一</h1>
        <p>
            思路：将确定和取消后需要执行的函数直接作为两个button的click事件回掉函数
        </p>
        <p>
            将两个函数作为参数传入便于封装
        </p>
        <div class="confirm" style='display:none;border:1px solid #ccc;width:200px;'>
            <p>
                提示信息
            </p>
            <p>
                <a href="javascript:;" id="cancel_btn">取消</a>
                <a href="javascript:;" id="ok_btn">确定</a>
            </p>
        </div>
        <div class="del">
            <a href="javascript:;">点击这里删除我</a>
        </div>
        <div class="status">
        </div>
        <script type="text/javascript">
            //思路：将确定和取消后需要执行的函数直接作为两个button的click事件回掉函数
            //将两个函数作为参数传入便于封装
            //缺点：调用过后需要手动隐藏层
            function myconfirm(func, cancel_callback){
                $(".confirm").fadeIn();
                if (typeof(func) == 'function') 
                    $('#ok_btn').click(func);
                if (typeof(cancel_callback) == 'function') 
                    $('#cancel_btn').click(cancel_callback);
            }

            //点击确定后需要执行的函数
            function ok(){
                //alert('you clicked ok');
                $('.del').html('你居然敢删除我？').fadeOut(2000);
                $('.status').html('你点击了"确定"按钮');
                //隐藏提示框(需要手动，不方便)
                $(".confirm").hide();
            }

            //点击取消后需要执行的函数，一般情况下直接隐藏confirm
            function cancel(){
                //alert('you clicked cancel');
                //隐藏提示框(需要手动，不方便)
                $('.status').html('你点击了"取消"按钮');
                $(".confirm").hide();
            }

            $(function(){
                $('.del').click(function(){
                    //弹出警告框
                    myconfirm(ok, cancel);
                });
            })
        </script>
    </body>
</html>

转载请注明：半叶寒羽 » (原创)jquery模拟实现confirm效果的两种思路一