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>