Javascript 一个站点上有多个模态

嘿，我搞不懂。我有一个脚本，它在我的站点的末尾生成我的modals。以下是我生成的两个模型：

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

&时代；
10
Margharita
Tomatensoße和Käse
6.5
在登瓦伦科布
&时代；
12
牛肠沙拉米

6.7
在登瓦伦科布

然后，我在同一个站点上创建了第二个脚本，它为表中的modals创建了按钮。这里是上面模式示例的按钮

第一个模式的按钮：

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

6.5&欧元；

第二个模式的按钮：

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

6.7&欧元；

---

当我现在单击页面上的第一个按钮时，会显示一个模态，其中包含两个模态的内容，但只有一个关闭按钮。当我关闭此模式，然后单击第二个模式的按钮时，我的屏幕将输出

.modal background

，但没有模式，然后它将保持此状态。我必须刷新我的站点才能继续。我做错了什么？希望有人能帮助我。

您需要关闭两个模态中的

表和
tr
标记

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


10
Margharita
Tomatensoße和Käse
6.5
//失踪
//失踪

工作示例

您需要关闭两个模态中的
表和
tr
标记

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


10
Margharita
Tomatensoße和Käse
6.5
//失踪
//失踪

工作示例

哦，我已经监督过了：）非常感谢！为什么演示中没有css或javascript？我在bootply中看不到它。@PiotrCiszewski我相信它默认加载在引导css和javascript中。由于该代码附带引导，因此不会显示。而且没有添加用户javascript/css。哦，我已经监督过了：）非常感谢！为什么演示中没有css或javascript？我在bootply中看不到它。@PiotrCiszewski我相信它默认加载在引导css和javascript中。由于该代码附带引导，因此不会显示。并且没有添加用户javascript/css。