Question

我有一个以下的plunker。有两种方式可以显示ionic modal：
1）单击按钮直接显示离子模态。
2）单击按钮显示离子弹出窗口，然后单击另一个按钮以显示离子模式。

请注意，在情况（1）中，我可以通过单击左上角按钮关闭离子模态，但不是在情况（2）的情况下。

注意：
1）当离子模态在（2）中打开时，离子弹出应该保留 2）backDropClickToClose必须设置为false。

为了使离子模式高于离子弹出，我使用了以下css：

.modal-backdrop {
  z-index: 13 !important;
}

我的怀疑是某些css阻止了（2）中的模态打开被点击。也许某种z-index。希望有人可以帮忙。

Answer 1

在index.html文件中包含jquery插件

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

在controller.js中添加一行以删除popup-open类。

$scope.showPopup = function() {
  var myPopup = $ionicPopup.show({
    template: '',
    title: 'Popup',
    scope: $scope,
    buttons: [
      { text: 'Cancel' },
      {
        text: '<b>Show Modal Dialog</b>',
        type: 'button-positive',
        onTap: function(e) {
          $('body').removeClass('popup-open');
          $scope.openModal();
          e.preventDefault();
        }
      }
    ]
  });
};

用下面的代码替换controller.js中的closeModal函数。

$scope.closeModal = function() {
    $('body').removeClass('modal-open');
    $scope.modal.hide();
  };

离子弹出阻止离子模式中的ng-click

1 个答案: