Question

我在列表中使用$ionicPopup.confirm()询问是否删除该行。

不幸的是，如果用户忽略弹出窗口并点击另一个删除图标，则会打开第二个弹出窗口。然后只有重新加载应用程序才有帮助，因为第一个弹出窗口保持打开状态且不可关闭。

有没有办法锁定背景，以便在弹出窗口打开时没有点击进入基础页面？

（使用离子v1.0.1）

代码

控制器：

this.deleteModule = function (index, item) {
    return $ionicPopup.confirm({
        title: $translate.instant('moduleplan.deleteModuleTitle'),
        template: $translate.instant('moduleplan.deleteModuleText'),
        cancelText: $translate.instant('moduleplan.deleteModuleCancel'),
        okText: $translate.instant('moduleplan.deleteModuleOk')
    }).then(function (response) {
        if (response) {
            return deleteModule(item.id);
        }
    });
};

查看（缩短）：

<ion-content scroll="true">
    <ion-list type="list-inset"
        show-delete="monthCtrl.isEditing"
        show-reorder="monthCtrl.isEditing">
        <ion-item class="item-timeline"
            ng-repeat="module in monthCtrl.modules track by $index"
            option-sort
            option-sort-disabled="monthCtrl.optionSortDisabled(module)">

            <!-- some content -->

            <ion-delete-button
                class="ion-minus-circled"
                ng-click="monthCtrl.deleteModule($index, module)"
                ng-hide="monthCtrl.optionDeleteDisabled(module)">
            </ion-delete-button>
        </ion-item>
    </ion-list>
</ion-content>

修改

当弹出窗口打开时，当我点击其他按钮时，它们没有反应（并且在浏览器中光标不会改变为手）。

分析DOM中的一个删除按钮：

<div class="item-left-edit item-delete enable-pointer-events visible active">
  <ion-delete-button class="ion-minus-circled button icon button-icon" ng-click="monthCtrl.deleteModule($index, module)" ng-hide="monthCtrl.optionDeleteDisabled(module)">
  </ion-delete-button>
</div>

当我从enable-pointer-events中删除div.item-delete课程时，将鼠标悬停在该元素上并且不显示删除按钮=＆gt;没有打开第二个弹出窗口。

enable-pointer-events由{ pointer-events: auto; }定义。
div.popup-container有z-index：12
div.item-delete有z-index：0
ion-item计算了z-index：2
发现了一些其他的z-index，但是包含我的列表的背景（z-index：11）和popup-container（z-index：12）之间的兄弟只有z-index：2。

使$ ionicPopup表现得像一个模态（捕获背景的点击事件）

0 个答案: