单击每个项目后出现模态。只能循环第一个项目,然后函数不起作用

时间:2016-06-13 22:31:14

标签: javascript jquery html twitter-bootstrap

我想在点击每个按钮后创建弹出模式,说明你点击了所有按钮。我只有一个按钮弹出模态窗口,但是当我创建相同的类时,我无法加载其余的其他按钮。请帮助,谢谢

                   

<div class="container">

    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>

    <!-- Modal -->
    <div class="mybox modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class=" mybox modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>



    <div class="modal fade" id="win" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">You won</h4>
                </div>
                <div class="modal-body">
                    <p>Congrats.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

</div>




<script>
    var Boxes = [];
    var ttle = $('.mybox').length;
    $('.mybox').click(function () {
        var bx = this.id;
        if (Boxes.indexOf(bx) >= 0) {
            $("#myMod").modal("toggle");
        } else {
            Boxes.push(bx);
        }
        if (Boxes.length == ttle) {
            $("#win").modal("toggle");
        }

    });

    $(document).ready(function(){
        $("#myBtn").click(function(){
            $("#myModal").modal();
        });
    });
</script>

0 个答案:

没有答案