Question

我有一个Bootstrap下拉列表，直到现在工作正常。现在我已经为我的代码添加了两个引导模态。我向我的代码添加模态后，我的下拉工作没有工作。如果我删除模态它只是工作正常。我无法弄清楚为什么。这是否与数据切换有关，因为我可以看到它们之间唯一的共同点这是我的代码。

<div class="my-container" ng-controller="compCategoryCtrl">
<div class="compare-table">
    <div class="head-info">
        <h3>Select colleges to compare</h3>
    </div>
    <div class="clearfix"></div>
    <div class="find-colleges">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4">
                    <div class="dropdown">
                        <button class="btn btn-primary dropdown-toggle find" type="button" data-toggle="dropdown" ng-model="selected_value1">{{selected_value1}}
                    <span class="caret"></span></button>
                        <ul class="dropdown-menu find-menu">
                            <li ng-repeat=" clg in college_list" ng-click="set_clg1(clg)">{{clg.college}}</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="dropdown">
                        <button class="btn btn-primary dropdown-toggle find" type="button" data-toggle="dropdown" ng-model="selected_value2">{{selected_value2}}
                     <span class="caret"></span></button>
                        <ul class="dropdown-menu find-menu">
                            <li ng-repeat=" clg in college_list" ng-click="set_clg2(clg)">{{clg.college}}</li>

                        </ul>

                    </div>
                </div>
                <div class=" col-md-4 go">
                    <button class="btn compare_buton trigger open" ng-click="fetch()">Go</button>
                </div>
            </div>
        </div>
    </div>

    <div class="clearfix"></div>
    <div class="nav-for-table slider close">
        <div id="home">
            <table class="table table-striped table-hover table-bordered">

                <tr ng-repeat="(key, value) in data1[0]">

                    <td class="col-md-6 head-field active">{{key}}</td>
                    <td class="col-md-3" ng-repeat="x in data1">
                        {{x[key]}}
                    </td>
                    <td class="col-md-3" ng-repeat="x in data1">
                        {{data2[$index][key]}}
                    </td>
                </tr>
                <tr>
                    <td class="col-md-6 head-field active">Departments</td>
                    <td class="col-md-3" data-toggle="modal" data-target="#show1">
                        Click here to view Departments
                    </td>
                    <td class="col-md-3" data-toggle="modal" data-target="#show2">
                        Click here to view Departments
                    </td>
                </tr>

            </table>
        </div>


    </div>
</div>



<div class="modal fade" id="show1" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;z-index: 9999;margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="modal-title">Department Information</h3>
            </div>
            <div class="modal-body">

                <table class="table table-striped" id="tblGrid">
                    <tr>
                        <th>Branch</th>
                        <th>Seats</th>
                        <th>Rating</th>
                        <th>Placements</th>
                    </tr>
                    <tr ng-repeat="x in dept1">
                        <td>{{x.branch}}</td>
                        <td>{{x.seats}}</td>
                        <td>{{x.rating}}</td>
                        <td>{{x.placement}}</td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
            </div>

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->

</div>

<div class="modal fade" id="show2" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;z-index: 9999;margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="modal-title">Department Information</h3>
            </div>
            <div class="modal-body">

                <table class="table table-striped" id="tblGrid">
                    <tr>
                        <th>Branch</th>
                        <th>Seats</th>
                        <th>Rating</th>
                        <th>Placements</th>
                    </tr>
                    <tr ng-repeat="x in dept2">
                        <td>{{x.branch}}</td>
                        <td>{{x.seats}}</td>
                        <td>{{x.rating}}</td>
                        <td>{{x.placement}}</td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
            </div>

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->

</div>

<script>
$('.trigger.open').on('click', function () {
    $('.slider').removeClass('close');
});
$('.trigger.close').on('click', function () {
    $('.slider').addClass('close');
});
</script>

有人可以帮忙吗。

Answer 1

删除每个模态上的内联样式：

style="display: block;z-index: 9999;margin-top: 100px;"

删除后，模态会按预期触发。我可能还建议从.close中删除<div class="nav-for-table slider">类，因为Bootstrap使用该类可能会导致各种显示冲突。

请参阅此Bootply以获取功能示例：

https://www.bootply.com/dFixsdYLpG

添加模态后，下拉切换停止工作

1 个答案: