CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Alesfatalis
Alesfatalis

Reputation: 777

multiple modals on one site

Hey i can't figure this out. I have a script which generates my modals on the end of my site. Here two models which i generate:

<div class="modal fade" id="1_10_1" tabindex="-1" role="dialog" aria-labelledby="1_10_1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">

                <table>
                    <tr>
                        <td>10</td>
                        <td>Margharita<br>Tomatensoße und Käse</td>
                        <td>6.5</td>
                    <form><input type="text" id="Anzahl" value="1"></form>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">In den Warenkorb</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="1_12_1" tabindex="-1" role="dialog" aria-labelledby="1_12_1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">

                <table>
                    <tr>
                        <td>12</td>
                        <td>Rindersalami<br></td>
                        <td>6.7</td>
                    <form><input type="text" id="Anzahl" value="1"></form>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">In den Warenkorb</button>
            </div>
        </div>
    </div>
</div>

Then i have a second script on the same site which creates the buttons for the modals in a table. Here my buttons for the above modal example.

Button for the first modal:

<button class="btn btn-success" data-toggle="modal" data-target="#1_10_1">6.5&nbsp; &euro;</button>

Button for the second modal:

<button class="btn btn-success" data-toggle="modal" data-target="#1_12_1">6.7&nbsp; &euro;</button>

When i now click the first button on my page a modal shows up with the content of both modals but only one close button. When i close this modal and than click the button of the second modal my screen outputs the .modal-backdrop but no modal and than it stays in this status. I have to refresh my site to continue. What i am doing wrong? Hope someone can help me.

Upvotes: 1

Views: 86

Answers (1)

Trevor
Trevor

Reputation: 16116

You need to close your table and tr tags in both modals.

           <table>
                <tr>
                    <td>10</td>
                    <td>Margharita<br>Tomatensoße und Käse</td>
                    <td>6.5</td>
                </tr>  //MISSING
            </table>  //MISSING

Working example

http://www.bootply.com/93669

Upvotes: 1

Related Questions