Question

我有三个组件 - app，sideNav和wallForm。在app标题中，我有一个按下sideNav的按钮。 sideNav有一个添加按钮，可以打开wallForm模式。这是一个ng2-bootstrap模式。下拉菜单加载正常，但是当我单击添加按钮时，模态加载并且屏幕灰显（禁用），但模式不会显示在前面。我知道它已加载，因为我可以检查浏览器开发人员工具中的元素。我尝试将模态的z-index设置为一个非常高的数字，远远高于下拉菜单的数量，这没有帮助。如何使模态表现得应该如此，即显示在顶部？

以下代码：

<!--app.html-->
<div>
    <!-- Nav bar -->
    <nav class="navbar navbar-color">
        <div class="container-fluid" id="nav_center">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <div class="btn-group" *ngIf="authenticated">
                    <button type="button" class="nav-features nav-expand-button dropdown-toggle"
                            (click)="isCollapsed = !isCollapsed" *ngIf="authenticated" id="navFeaturesButton"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                        <i class="fa fa-cube"></i>
                        <span>Walls</span>
                    </button>
                    <div class="dropdown-menu sideNav">
                        <div><i class="fa fa-caret-up fa-2x"></i></div>
                        <side-nav id="sidenav"></side-nav>
                    </div>
                </div>
                
            </div>

        </div><!-- /.container-fluid -->
    </nav>
</div>

<!-- sidenav.html -->

<div class="nav-features-content">
    <div>

        <ul *ngIf="showContent">
            <!--<li *ngFor="let wall of walls" class="wallListItem">-->
            <li *ngFor="let wall of walls | filter:[{Title: searchTerm}]">
                <div class="themeColor"></div>
                <a [routerLink]="['/wall', wall.Id]"> {{wall.Item.Title}}</a>
                <span class="glyphicon glyphicon-option-horizontal sideNav-ellipsis" ></span>
            </li>

        </ul>
        <br />
        <div class="addWall" (click) ="wfModal.showNew()" >
            +  add wall
        </div>

    </div>
</div>
<!--Modal dialog-->

<wall-form #wfModal></wall-form>
<!--this is the modal body-->

<div bsModal #wallFormModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" 
     aria-labelledby="mySmallModalLabel" aria-hidden="true"
     style="position:absolute; top:30px; right: 30px;">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" aria-label="Close" (click)="hide()">
                    <span aria-hidden="true">&times;</span>
                </button>
                <span class="modal-title">{{modalTitle}}</span>
            </div>
            <div class="modal-body">
                <div class="panel">
                    <form #wallForm="ngForm" (ngSubmit)="save()" class="wallForm">
                        <!-- content excluded for brevity -->
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

好吧，我无法告诉你为什么bootstrap drop down会导致你出现问题。我也遇到了引导下拉问题。但这是一个可能的工作。尝试使用角落插件进行下拉，我使用这个https://github.com/pleerock/ng2-dropdown。

对于模态我也使用angular2插件，因为引导问题，ng2-modal在https://www.npmjs.com/package/ng2-modal

找到

这是最终产品plunkr

的工作插件

Angular - Bootstrap：模式无法从按钮下拉菜单

1 个答案: