简体   繁体   English

在其他模式弹出窗口中创建模式弹出窗口

[英]Create Modal popup inside other modal popup

I am using angularjs to create modal popup. 我正在使用angularjs创建模式弹出窗口。 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. 我在引导中使用角度UI。

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
            });
        };
    });

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM