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

Question

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

如下，当我点击添加停止按钮时，一个新的模式打开，这个弹出模式应该隐藏或关闭并再次打开。

<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 之前完成 manually/programmatically；在你的控制器中为你的情况。

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

<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>

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

a modal popup opening on the back of a modal popup

html

javascript

modalpopups

modalpopup

angularjs