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

Create Modal popup inside other modal popup

本文关键字：窗口 模式 创建 其他      更新时间：2023-09-26

我正在使用angularjs创建模式弹出窗口。我正在从弹出窗口添加记录，并在其中显示记录列表。我们还需要在弹出窗口上进行删除操作，如果用户试图删除，它会显示一个确认模式弹出窗口，它实际上会在当前弹出窗口中弹出。我不知道我们怎么能做到这一点。我正在使用带引导程序的angular UI。

触发到弹出模型的链接

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

角度应用：

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

试试这个：

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

相关文章：