(原创)jquery模拟实现confirm效果的两种思路一
本文发布于 12 年前, 内容可能已经过时或失效!
大家知道,js弹出的警告框非常难看,这跟据浏览器自身情况又不一样。很多情况下,根据系统的整体结构,我们需要更友好,更美化的展示给用户才是最好的体验。废话不多说。 以前一直纠结,不知道怎么实现,看了人家代码也没搞清楚,后来在项目中同事的写法提醒了我,于是记下来。 ## 实现由两种思路: **思路1**:将确定和取消后需要执行的函数直接作为两个button的click事件回掉函数,有一个缺点是调用过后需要手动隐藏层 **思路2**:事件点击后先将帮顶在该dom上的其他事件移除,然后绑定上警告框事件,在根据用户在警告事件里的选择来确定需要执行的事件。 可能说的很绕。 ## 下面对思路1做一个demo ```html <!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> ```