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">×</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">×</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