CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrappopupangular-ui
Krishna Bhatt
Krishna Bhatt

Reputation: 261

Create Modal popup inside other modal popup

I am using angularjs to create modal popup. I am adding records from a popup and show list of records there itself. we need a delete action also on the popup and if user try to remove, it show a confirmation modal popup which will be actually popup inside the current popup. ANy idea how can we achive this this. I am using angular UI with bootstrap.

Upvotes: 0

Views: 2573

Answers (2)

user14394673
user14394673

Reputation:

Try this:

.data {
  visibility:hidden;
  position fixed;
  background-color:blue;
  z-index:0;
}
.data:target {
  visibility:visible;
}

.confirm-delete {
  visibility:hidden;
  position fixed;
  background-color:blue;
  z-index:1;
}
.confirm-delete:target {
  visibility:visible;
}
<a href="#data"><button>View data</button></a>
<div class="data" id="data">
  <p>Record 1</p>
  <p>Record 1</p>
  <p>Record 1</p>
  <p>Record 1</p>
  <p>Record 1</p>
  <a href="#confirm-delete"><button>Delete</button></a>
</div>
<div class="confirm-delete" id="confirm-delete">
Are you sure you want to delete
  <button>Yes</button>
  <button>No</button>
</div>

Upvotes: 1

Sithira Pathirana
Sithira Pathirana

Reputation: 608

Trigger link to popup model

<a href="" ng-click="openConfirmWithPreCloseCallbackInlinedWithNestedConfirm()">Open confirm modal with pre-close inlined with nested confirm.</a>

Angular Application :

    var app = angular.module('exampleDialog', ['ngDialog']);

    app.controller('MainCtrl', function ($scope, $rootScope, ngDialog) {

    $scope.openConfirmWithPreCloseCallbackInlinedWithNestedConfirm = function () {
            ngDialog.openConfirm({
                template: 'dialogWithNestedConfirmDialogId',
                className: 'ngdialog-theme-default',
                preCloseCallback: function(value) {

                    var nestedConfirmDialog = ngDialog.openConfirm({
                        template:
                                '<p>Are you sure you want to close the parent dialog?</p>' +
                                '<div class="ngdialog-buttons">' +
                                    '<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog(0)">No' +
                                    '<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirm(1)">Yes' +
                                '</button></div>',
                        plain: true,
                        className: 'ngdialog-theme-default'
                    });

                    return nestedConfirmDialog;
                },
                scope: $scope
            });
        };
    });

Upvotes: 1

Related Questions