javascript - 我有两个 bootstrap 弹出式旋转木马，但它们相互重叠，不能独立使用，我该如何解决这个问题？

Question

我目前有两个 Bootstrap 轮播，每个轮播都使用一个按钮来激活。单击任一按钮时，两个幻灯片放映看起来彼此重叠，因此我无法独立控制每个幻灯片，这也使它看起来非常没有吸引力。

您可以在我的 CodePen 中找到这两个按钮:click here

到目前为止，我已经这样做了:

<div class="container-fluid bg-5 text-center" id = "container-2">
        <h2 class="margin about" style="color: #cdcdcd;">Portfolio</h2>
        <div class = "row">
            <div class = "col-md-4">
                <div class = "well">
                    <h1> Click Me 1 </h1>
                    <!-- Large modal -->
                    <button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">BUTTON1</button>
                    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                    <!-- Wrapper for slides -->
                                    <div class="carousel-inner">
                                        <div class="item active">
                                            <img class="img-responsive" src="http://placehold.it/1200x600/555/000&text=One" alt="...">
                                            <div class="carousel-caption">
                                                One Image
                                            </div>
                                        </div>
                                        <div class="item">
                                            <img class="img-responsive" src="http://placehold.it/1200x600/fffccc/000&text=Two" alt="...">
                                            <div class="carousel-caption">
                                                Another Image
                                            </div>
                                        </div>
                                        <div class="item">
                                            <img class="img-responsive" src="http://placehold.it/1200x600/fcf00c/000&text=Three" alt="...">
                                            <div class="carousel-caption">
                                                Another Image
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Controls -->
                                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left"></span>
                                    </a>
                                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class = "col-md-4">
                <div class = "well">
                    <h1> Click Me 2 </h1>
                    <!-- Large modal -->
                    <button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">BUTTON 2</button>
                    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
                                    <!-- Wrapper for slides -->
                                    <div class="carousel-inner">
                                        <div class="item active">
                                            <img class="img-responsive" src="http://placehold.it/1200x600/555/000&text=One" alt="...">
                                            <div class="carousel-caption">
                                                One Image
                                            </div>
                                        </div>
                                        <div class="item">
                                            <img class="img-responsive" src="http://placehold.it/1200x600/fffccc/000&text=Two" alt="...">
                                            <div class="carousel-caption">
                                                Another Image
                                            </div>
                                        </div>
                                        <div class="item">
                                            <img class="img-responsive" src="http://placehold.it/1200x600/fcf00c/000&text=Three" alt="...">
                                            <div class="carousel-caption">
                                                Another Image
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Controls -->
                                    <a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left"></span>
                                    </a>
                                    <a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

正如您将看到的，当您单击第一个按钮时，两个幻灯片都会打开，同样，当您单击第二个按钮时...目的是让两个按钮显示两个不同的幻灯片，因此我可以制作类似投资组合页面的东西。有人可以帮我解决这个问题吗，我将不胜感激。

Answer 1

在你的按钮中你有 data-target=".bs-example-modal-lg"。通过 data-target="#id1" 将您的 data-target 切换为目标 id，然后在您的模式中相应地设置它。