<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>删除提示特效</title> <script type="text/javascript" src="./js/jquery-1.8.3.js"></script> <style type="text/css"> * { font-size: 12px; } #cart { width: 602px; } #cart .tipsbox { width: 200px; border: 2px solid #aaa; float: right; } </style> <script type="text/javascript"> $(function(){ $("#del").click(function(){ $(".tipsbox").show("slow"); }); $("input[name=cancel]").click(function(){ $(".tipsbox").hide("fast"); }); }); </script> </head> <body> <div id="cart"> <table width="600" border="1" cellpadding="0" cellspacing="0"> <tr> <th><input type="checkbox" /> 全选</th> <th>商品信息</th> <th>宜美惠价</th> <th>数量</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" /></td> <td><img src="images/umbrella.gif" /> <a href="#">天堂直杆彩虹伞</a> </td> <td>￥32.9元</td> <td><input type="text" value="1" /></td> <td> <a href="#" id="del">删除</a> </td> </tr> </table> <!--弹出框--> <div class="tipsbox" style="display:none;"> <p>确定要删除吗？</p> <p> <input name="confirm" type="button" value="确认" class="btns" /> <input name="cancel" type="button" value="取消" class="btns" /> </p> </div> </div> </body> </html>