点击删除键的提示特效

<!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>

 

posted @ 2017-12-19 15:37  爱踢两键  阅读(144)  评论(0编辑  收藏  举报