模态弹出窗口背面的模态弹出窗口

Question

我尝试了一些但没有工作，我需要通过隐藏模式弹出窗口或任何其他方式在模态弹出窗口上打开模态弹出窗口。 根据我的应用程序结构，我也无法注入控制器实例。任何帮助都不胜感激。

如下所示，当我点击添加停止按钮时，会打开一个新模态，此弹出模式应该隐藏或关闭＆amp;再次开放。

<div class="modal fade" id="editModal" role="dialog">
  <div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Update Route Details</h4>
    </div>
    <div class="modal-body">

        <form class="well form-horizontal" name="updateRouteForm">
            <fieldset>
                <!-- Route ID-->
                <div class="form-group">
                    <label class="control-label">Route ID</label>
                    <div class="inputGroupContainer">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-edit"></i></span>
                            <input name="routeId" value="{{popupData.routeId}}" class="form-control" disabled>
                        </div>
                    </div>
                </div>
                <!-- Route Name-->
                <div class="form-group">
                    <label class="control-label">Route Name</label>
                    <div class="inputGroupContainer">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input name="route" class="form-control" type="text" ng-model="popupData.route" value="{{popupData.route}}" required>
                        </div>
                    </div>
                </div>
                <!-- Description-->
                <div class="form-group">
                    <label class="control-label">Route Description</label>
                    <div class="inputGroupContainer">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
                            <input name="description" ng-model="popupData.description" value="{{popupData.description}}" class="form-control" type="text" required maxlength="10">
                        </div>
                    </div>
                </div>
                <!-- Route distance-->
                <div class="form-group">
                    <label class="control-label">Route Distance</label>
                    <div class="inputGroupContainer">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
                            <input name="distance" ng-model="popupData.distance" value="{{popupData.distance}}" class="form-control" type="number" step="00.01" required>
                        </div>
                    </div>
                </div>


                <br /><br />

                <!-- Display Stoppage Data -->
                <div align="center" class="form-group-sm">

                    <table id="stoppageTable" class="table table-striped table-hover table-bordered table-xs ">
                        <thead>
                            <tr>
                                <th class="btn-info">serialNo</th>
                                <th class="btn-info">Stoppage Name</th>
                                <th class="btn-info">Description</th>
                                <th class="btn-info">Route order</th>
                                <th class="btn-info">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="stoppage in StoppageData">
                                <td>{{ stoppage.orderId }}</td>
                                <td>{{ stoppage.stoppageName }}</td>
                                <td>{{ stoppage.description }}</td>
                                <td>
                                    <div class="floating-buttons" align="center">
                                        <button type="button" name="moveUpButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveUpModal" ng-click="r.ForMoveUp($index)" data-toggle="tooltip" data-placement="bottom" title="MoveUP"><i class="glyphicon glyphicon-triangle-top"></i></button>
                                        <button type="button" name="moveDownButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveDownModal" ng-click="r.ForMoveDown($index)" data-toggle="tooltip" data-placement="top" title="MoveDown"><i class="glyphicon glyphicon-triangle-bottom"></i></button>
                                    </div>
                                </td>
                                <td>
                                    <div class="floating-buttons" align="center">
                                        <button type="button" name="deleteStoppage" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteStoppage" ng-click="r.setValuesForStoppageModal(stoppage,$index)" data-toggle="tooltip" data-placement="bottom" title="DeleteStoppage"><i class="glyphicon glyphicon-trash"></i></button>

                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </fieldset>
        </form>
    </div>
        <div class="modal-footer">
            <button type="button" name="addButton" class="btn btn-info" data-toggle="modal" data-target="#addModal" title="Add" ng-click="closeUpdate()">Add Stoppage</button>
            <button type="button" class="btn btn-success" data-dismiss="modal" ng-click="r.updateRoute(popupData)">Update</button>
            <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
        </div>
    </div>
  </div>

</div>

AddStoppage弹出代码：

<div class="modal fade" id="addModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" align="center">Add Stoppage</h4>
            </div>
            <div class="modal-body">

                <!--<form class="well form-horizontal" name="addStoppageForm" ng-submit="r.addstoppageRow()">-->
                <form class="well form-horizontal" id="addStoppageForm">
                    <fieldset>
                        <!-- Stoppage Name-->
                        <div class="form-group">
                            <label class="control-label">Stoppage Name</label>
                            <div class="inputGroupContainer">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
                                    <input name="stoppageName" ng-model="stoppage.stoppageName" placeholder="Stoppage Name" class="form-control" type="text" required>
                                </div>
                            </div>
                        </div>

                        <!-- Stoppage Description-->
                        <div class="form-group">
                            <label class="control-label"> Description</label>
                            <div class="inputGroupContainer">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                                    <textarea name="stoppageDescription" ng-model="stoppage.stoppageDescription" placeholder="Stoppage Description" class="form-control" type="text" required></textarea>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-warning pull-left" value="addStoppage" data-dismiss="modal" ng-click="r.addStoppageRow(stoppage)">Submit</button>
                <button type="button" class="btn btn-info pull-right" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>

</div>

Answer 1

理想情况下，bootstrap不支持多级模式。你必须通过JavaScript手动/编程地完成它;在您的控制器中为您的情况。

你可以创建一个标志变量来为模态体添加更多的css。当有多个标志时，该标志可以激活。

＆＃13;

＆＃13;

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal">One</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addModal">Two</button>
<div class="modal fade" id="editModal" role="dialog" ng-style="{display: hide ? 'none': 'block'}">
   <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Update Route Details</h4>
      </div>
      <div class="modal-body">

        <form class="well form-horizontal" name="updateRouteForm">
          <fieldset>
            <!-- Route ID-->
            <div class="form-group">
              <label class="control-label">Route ID</label>
              <div class="inputGroupContainer">
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-edit"></i></span>
                  <input name="routeId" value="{{popupData.routeId}}" class="form-control" disabled>
                </div>
              </div>
            </div>
            <!-- Route Name-->
            <div class="form-group">
              <label class="control-label">Route Name</label>
              <div class="inputGroupContainer">
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                  <input name="route" class="form-control" type="text" ng-model="popupData.route" value="{{popupData.route}}" required>
                </div>
              </div>
            </div>
            <!-- Description-->
            <div class="form-group">
              <label class="control-label">Route Description</label>
              <div class="inputGroupContainer">
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
                  <input name="description" ng-model="popupData.description" value="{{popupData.description}}" class="form-control" type="text" required maxlength="10">
                </div>
              </div>
            </div>
            <!-- Route distance-->
            <div class="form-group">
              <label class="control-label">Route Distance</label>
              <div class="inputGroupContainer">
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
                  <input name="distance" ng-model="popupData.distance" value="{{popupData.distance}}" class="form-control" type="number" step="00.01" required>
                </div>
              </div>
            </div>


            <br /><br />

            <!-- Display Stoppage Data -->
            <div align="center" class="form-group-sm">

              <table id="stoppageTable" class="table table-striped table-hover table-bordered table-xs ">
                <thead>
                  <tr>
                    <th class="btn-info">serialNo</th>
                    <th class="btn-info">Stoppage Name</th>
                    <th class="btn-info">Description</th>
                    <th class="btn-info">Route order</th>
                    <th class="btn-info">Action</th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="stoppage in StoppageData">
                    <td>{{ stoppage.orderId }}</td>
                    <td>{{ stoppage.stoppageName }}</td>
                    <td>{{ stoppage.description }}</td>
                    <td>
                      <div class="floating-buttons" align="center">
                        <button type="button" name="moveUpButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveUpModal" ng-click="r.ForMoveUp($index)" data-toggle="tooltip" data-placement="bottom" title="MoveUP"><i class="glyphicon glyphicon-triangle-top"></i></button>
                        <button type="button" name="moveDownButton" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#moveDownModal" ng-click="r.ForMoveDown($index)" data-toggle="tooltip" data-placement="top" title="MoveDown"><i class="glyphicon glyphicon-triangle-bottom"></i></button>
                      </div>
                    </td>
                    <td>
                      <div class="floating-buttons" align="center">
                        <button type="button" name="deleteStoppage" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteStoppage" ng-click="r.setValuesForStoppageModal(stoppage,$index)" data-toggle="tooltip" data-placement="bottom" title="DeleteStoppage"><i class="glyphicon glyphicon-trash"></i></button>

                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </fieldset>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" name="addButton" class="btn btn-info" data-toggle="modal" data-target="#addModal" title="Add" ng-click="hide=true;closeUpdate()">Add Stoppage</button>
        <button type="button" class="btn btn-success" data-dismiss="modal" ng-click="r.updateRoute(popupData)">Update</button>
        <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="addModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" align="center">Add Stoppage</h4>
      </div>
      <div class="modal-body">

        <!--<form class="well form-horizontal" name="addStoppageForm" ng-submit="r.addstoppageRow()">-->
        <form class="well form-horizontal" id="addStoppageForm">
          <fieldset>
            <!-- Stoppage Name-->
            <div class="form-group">
              <label class="control-label">Stoppage Name</label>
              <div class="inputGroupContainer">
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
                  <input name="stoppageName" ng-model="stoppage.stoppageName" placeholder="Stoppage Name" class="form-control" type="text" required>
                </div>
              </div>
            </div>

            <!-- Stoppage Description-->
            <div class="form-group">
              <label class="control-label"> Description</label>
              <div class="inputGroupContainer">
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                  <textarea name="stoppageDescription" ng-model="stoppage.stoppageDescription" placeholder="Stoppage Description" class="form-control" type="text" required></textarea>
                </div>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-warning pull-left" value="addStoppage" data-dismiss="modal" ng-click="hide=false;r.addStoppageRow(stoppage)">Submit</button>
        <button type="button" class="btn btn-info pull-right" data-dismiss="modal" ng-click="hide=false;">Cancel</button>
      </div>
    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;