Bootstrap multi modals with accordion/tabs

[keneso]

Hi

I am trying to get multiple modals on same page using the accordion (or in alternative the tabs), but while first modal works fine the second does not show.
I found this, but I fail to get what I need to do, could you please detail it for me?

Thank you

For your reference this is my code

<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">
    <div class="panel panel-default">
        <div class="panel-heading" id="headingOne" role="tab">
            <h4 class="panel-title"><a aria-controls="collapseOne" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" role="button">bianca 38 </a></h4>
        </div>
        <div aria-labelledby="headingOne" class="panel-collapse collapse in" id="collapseOne" role="tabpanel">
            <div class="panel-body">
                <div class="fz-gallery-wrap">
                    <div class="fz-gallery-img">
                        <img class="img-responsive" src="images/gallery/bianca-38_05.jpg">
                    </div>
                    <div class="fz-gallery-img">
                        <img class="img-responsive" src="images/gallery/bianca-38_06.jpg">
                    </div>
                    <div class="fz-gallery-img">
                        <img class="img-responsive" src="images/gallery/bianca-38_07.jpg">
                    </div>
                    <div class="fz-gallery-img">
                        <img class="img-responsive" src="images/gallery/bianca-38_08.jpg">
                    </div>
                </div>
                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">Realizzazioni</h4>
                            </div>
                            <div class="modal-body">
                            </div>
                            <div class="modal-footer">
                            <button type="button" class="fz-button" data-dismiss="modal">Chiudi</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" id="headingTwo" role="tab">
            <h4 class="panel-title"><a aria-controls="collapseTwo" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseTwo" role="button">Ciliegio 75 </a></h4>
        </div>
        <div aria-labelledby="headingTwo" class="panel-collapse collapse" id="collapseTwo" role="tabpanel">
            <div class="panel-body">
                <div class="fz-gallery-wrap">
                    <div class="fz-gallery-img">
                        <img class="img-responsive" src="images/gallery/bianca-38_01.jpg">
                    </div>
                    <div class="fz-gallery-img">
                        <img class="img-responsive" src="images/gallery/bianca-38_02.jpg">
                    </div>
                    <div class="fz-gallery-img">
                        <img class="img-responsive" src="images/gallery/bianca-38_03.jpg">
                    </div>
                    <div class="fz-gallery-img">
                        <img class="img-responsive" src="images/gallery/bianca-38_04.jpg">
                    </div>
                </div>
                <!-- Modal -->
                <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal2Label">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">ciliegio</h4>
                            </div>
                            <div class="modal-body">
                            </div>
                            <div class="modal-footer">
                            <button type="button" class="fz-button" data-dismiss="modal">Chiudi</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" id="headingThree" role="tab">
            <h4 class="panel-title"><a aria-controls="collapseThree" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseThree" role="button">rovere 202 </a></h4>
        </div>
        <div aria-labelledby="headingThree" class="panel-collapse collapse" id="collapseThree" role="tabpanel">
            <div class="panel-body">
                <div class="fz-gallery-wrap">
                    <div class="fz-gallery-img">
                        <img class="img-responsive" src="images/gallery/bianca-38_01.jpg">
                    </div>
                    <div class="fz-gallery-img">
                        <img class="img-responsive" src="images/gallery/bianca-38_02.jpg">
                    </div>
                    <div class="fz-gallery-img">
                        <img class="img-responsive" src="images/gallery/bianca-38_03.jpg">
                    </div>
                    <div class="fz-gallery-img">
                        <img class="img-responsive" src="images/gallery/bianca-38_04.jpg">
                    </div>
                </div>
                <!-- Modal -->
                <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModal2Label">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">ciliegio</h4>
                            </div>
                            <div class="modal-body">
                            </div>
                            <div class="modal-footer">
                            <button type="button" class="fz-button" data-dismiss="modal">Chiudi</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

[PaulOB]

@keneso

ound this, but I fail to get what I need to do, could you please detail it for me?

The article is saying to move the html code for each of the modals so that the modals are outside the collapsed tabs html. I assume that the bootstrap modals are fixed positioned modals so it does not matter where the html appears as long as it is outside a collapsed section.

If the modal is inside the html for a hidden tab then it probably won’t get initialised when the page loads. There probably is a way of initialising it using .on() but I am not familiar with the bootstrap methods.

If that doesn’t work then please supply a full demo with html, css and js for us to play with

[keneso]

Thank you.

I did read that few times, but did concentrate more on the initialising it, than moving the modals anywhere outside the hidden parts; actually your explanation has been somehow clearer about it, thus helping me, it works fine now.