Bootstrap 4 从旋转木马中的汽车引导多个模态

我正在尝试一些我还没有找到解决方案的事情——我正在尝试在旋转木马中使用卡片，并将这些卡片的细节打开一个模式。这对于第一个模态很好，但是对于第二个模态，它只显示模态背景，而不显示模态本身。由于我不能检查它，我无法看到它是否被放在屏幕上的其他地方。我读到过一些问题，当从另一个引导类（如card）中打开两个模态时，有时会出现问题-这可能是问题所在吗

很抱歉让人讨厌，但是经过搜索，很难找到一个干净的解决方案（至少对于我这个初学者来说是这样的：

第一个传送带幻灯片：

 <div id="carouselExampleIndicators" class="carousel slide" data-interval="7000">
       <ol class="carousel-indicators">
           <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
           <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
           <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
       </ol>
       <div class="carousel-inner" role="listbox">
           <div class="carousel-item active" style="background-color: #000000;">
                <div class="row">
                <div class="col-12 text-center">
                    <div class="card col-3">
                        <div class="card-body">
                        <h5 class="card-title">Com 1</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Since Sep. 2017</h6>
                        <p class="card-text">Pos 1</p>
                        <a type="button" class="card-link" data-toggle="modal" data-target="#com1Modal" href="#">Details</a>
                        </div>
                    </div>
                    <div class="card col-3">
                        <div class="card-body">
                        <h5 class="card-title">Com 2</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Aug. - Sep. 2017</h6>
                        <p class="card-text">Pos 2</p>
                        <a type="button" class="card-link" data-toggle="modal" data-target="#com2Modal" href="#">Details</a>
                        </div>
                    </div>
                    <div class="card col-3">
                        <div class="card-body">
                        <h5 class="card-title">Com 3</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Jul. 2015 – Jul. 2017</h6>
                        <p class="card-text">Pos 3</p>
                        <a type="button" class="card-link" data-toggle="modal" data-target="#com3Modal" href="#">Details</a>
                        </div>
                    </div>
                </div>
                </div>
            </div>
           <div class="carousel-item " style="background-color: #000000;">
                <div class="row">
                <div class="col-12 text-center">
                    <div class="card col-3">

Com 1
自2017年9月起
位置1
Com 2
2017年8月-9月
位置2
Com 3
2015年7月-2017年7月
位置3

以及相应的前两个模态：

<div class="modal fade" id="com1Modal" tabindex="-1" role="dialog" aria-labelledby="bekbModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Com 1</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body text-left">
        <p>
        <h3>Pos 1</h3>
        <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        </ul>
        Notable Projects:
        <ul>
        <li>Proj 1</li>
        <li>Proj 2</li>
        <li>Proj 3</li>
        <li>Proj 4</li>
        </ul>
        </p>
    <div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
<div class="modal fade" id="com2Modal" tabindex="-1" role="dialog" aria-labelledby="raifModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Com 2</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body text-left">
        <p>
        <h3>Pos 2</h3>
        <ul>
        <li>Job 1</li>
        <li>Job 2</li>
        </ul>
        </p>
    <div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

Com 1
&时代；

位置1

项目1
项目2
项目3
项目4

值得注意的项目：

项目1
项目2
项目3
项目4


接近
Com 2
&时代；

位置2

工作1
工作2


接近

有人能在这方面帮我指点一下吗

非常感谢你的帮助

谢谢你的帮助， 西蒙

补充说明： 脚本链接： 当然，大家好-我已经包括了Bootstrap中的标准JS脚本：

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

appologys：现在还包括了一个JSFIDLE（我刚刚了解了这个函数-我的appologys）：

---

哇，非常感谢您的帮助。我能够根据您的解决方案跟踪它-我在模态体后打开一个div，而不是关闭它，但是由于数字相加，我没有再拿起它。我实际上感觉模态页脚属于体内。它没有，而且显然导致了这一趋势通用电气的行为

在你的帮助下，我们解决了这个问题

---

非常感谢您的努力。

您有JSFIDLE或jsbin url显示给我们吗？您好，当然有-我们刚刚添加了我包含的标准脚本。希望这能有所帮助。我不知道您的HTML有什么问题。但我创建了新的JSFIDLE