jQuery点击标签弹窗确认或取消删除被点击项



257 1027 343



特效描述:点击标签弹窗 确认取消删除 被点击项,jQuery点击标签,弹出遮罩层和是否删除确认框,点击确认就会删除被点击项,弹窗消失。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

2. HTML代码

        <div class="demo1">
            <ul>
                <li>1(点击删除)</li>
                <li>2(点击删除)</li>
                <li>3(点击删除)</li>
                <li>4(点击删除)</li>
                <li>5(点击删除)</li>
            </ul>
        </div>
        <div class="pop">
            <div class="popMain">
                <div class="popTop"></div>
                <div class="popMiddle">
                    <p>是否确认删除?</p>
                </div>
                <div class="popBottom">
                    <span class="confirm">确认</span>
                    <span class="cancel">取消</span>
                </div>
            </div>
        </div>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            (function(){
                var num;
                $(".demo1").on('click', 'ul li', function(event) {
                    event.preventDefault();
                    num = $(this).index();
                    $(".pop").fadeIn('fast');
                });
                $(".popBottom").on('click', 'span', function(event) {
                    event.preventDefault();
                    if($(this).hasClass('confirm')){
                        $(".demo1 ul li").eq(num).remove();
                        num = "";
                        $(".pop").fadeOut();
                    }else{
                        $(".pop").fadeOut();
                        num = "";
                    }
                });
            })();
        });
    </script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到