mardi 14 juin 2016

modal on appears after each item is clicked..can only loop the first item,then function doesnt work

I wanted to create as pop up modal after each button has been clicked on saying, you have clicked on all the buttons. I got the modal window to pop up with just one button but I cannot get the the rest of the other buttons to load when I create the same class. Please help,thanks

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

Aucun commentaire:

Enregistrer un commentaire