a modal popup opening on the back of a modal popup

Question

I have tried few things but didn't work, i need to open a modal popup on a modal popup either by hiding back modal popup or any other way. I cannot inject controller instance too according to my application structure. Any help could be greatly appreciated.

As below, when i click on add stoppage button, a new modal opens, and this popup modal should hide or close & open again.

<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 Popup code:

<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

Ideally multilevel modals are not supported by bootstrap. you would have to do it manually/programmatically by JavaScript; in your controller for your case.

You can make a flag variable to add some more css to the modal body. That flag can be active when there are more than one flags.

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