web - Bootstrap 3 多模态问题

Question

我有一个页面想以多种模式打开。我能够让 id="myModal"出现模态，这是我试图复制的示例。我用 id="redcarpet"创建了第二个，但无法弹出相同的窗口。我希望有人能看到我的代码中的错误并帮助我修复它。

<li class="dropdown">
                            <a href="#" class="dropdown-toggle dropdown" data-toggle="dropdown" data-hover="dropdown"
                            data-delay="200" data-close-others="false"><span style="color: black; font-family: 'Modern Regular';">PHOTOS</span></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#redcarpet">Red Carpet</a>
                                </li>
                                <li>
                            <a href="#" data-toggle="modal" data-target="#myModal"><span style="color: black; font-family: 'Modern Regular';">LEAD</span></a>
                        </li>

× 2015年奖项

        <!-- red carpet Modal -->
        <!-- Modal -->
    <div class="modal modal-wide fade" id="redcarpet" tabindex="-1" role="dialog"
    aria-labelledby="redcarpetLabel" 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">×</button>
                    <h4 class="modal-title" id="redcarpetLabel">2015 Awards</h4>
                </div>
                <div class="modal-body">
                    <iframe src="redCarpet.html" width="580" height="780" frameborder="0"
                    allowtransparency="true"></iframe>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
    <!-- /.modal -->

<!-- Modal -->
    <div class="modal modal-wide fade" id="myModal" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel" 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">×</button>
                    <h4 class="modal-title" id="myModalLabel">2015 Billboard Music Awards</h4>
                </div>
                <div class="modal-body">
                    <iframe src="billboardmusicawards_lead.htm" width="580" height="780" frameborder="0"
                    allowtransparency="true"></iframe>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
    <!-- /.modal -->

Answer 1

您说您已将模态 div 容器的 id 更改为 redcarpet(是的，这可以在您的代码中看到)。

但是，在调用此模式的链接的 data-target 属性中，您仍在使用旧 ID (#myModal):

<a href="#" data-toggle="modal" data-target="#myModal">