一个站点上有多个模态

时间:2013-11-12 16:30:17

标签: javascript jquery html twitter-bootstrap

嘿,我无法弄清楚这一点。我有一个脚本,可以在我的网站末尾生成我的模态。这里我生成了两个模型:

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

然后我在同一个站点上有第二个脚本,它为表格中的模态创建按钮。这是我上面模态示例的按钮。

第一个模态的按钮:

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

第二个模态的按钮:

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

当我现在点击页面上的第一个按钮时,模态会显示两个模态的内容,但只显示一个关闭按钮。当我关闭这个模态而不是单击第二个模态的按钮时,我的屏幕会输出.modal-backdrop,但没有模态,而是保持此状态。我必须刷新我的网站才能继续。我做错了什么?希望有人可以帮助我。

1 个答案:

答案 0 :(得分:1)

您需要关闭两个模式中的tabletr标记。

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

工作示例

http://www.bootply.com/93669