title: Make $ionicPopup behave like a modal (catch click events of backdrop)
body: <p>I'm using <code>$ionicPopup.confirm()</code> in a list to ask whether to delete the row or not.</p>
  
  <p>Unfortunately a second popup opens if the user ignores the popup and taps on another Delete-icon. Then only a reload of the app helps, since the first popup stays open and isn't closable.</p>
  
  <p>Is there a way to lock the backdrop so no clicks come through to the underlying page while popup is open?</p>
  
  <p>(Using ionic v1.0.1)</p>
  
  <p><strong>Code</strong></p>
  
  <p>controller:</p>
  
  <pre><code>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);
          }
      });
  };
  </code></pre>
  
  <p>view (shortened):</p>
  
  <pre><code>&lt;ion-content scroll="true"&gt;
      &lt;ion-list type="list-inset"
          show-delete="monthCtrl.isEditing"
          show-reorder="monthCtrl.isEditing"&gt;
          &lt;ion-item class="item-timeline"
              ng-repeat="module in monthCtrl.modules track by $index"
              option-sort
              option-sort-disabled="monthCtrl.optionSortDisabled(module)"&gt;
  
              &lt;!-- some content --&gt;
  
              &lt;ion-delete-button
                  class="ion-minus-circled"
                  ng-click="monthCtrl.deleteModule($index, module)"
                  ng-hide="monthCtrl.optionDeleteDisabled(module)"&gt;
              &lt;/ion-delete-button&gt;
          &lt;/ion-item&gt;
      &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p><strong>Edit</strong></p>
  
  <p>While popup is opened, when I click on other buttons, they don't react (and in browser the cursor does not change to hand).</p>
  
  <p>Analyzing one of the delete-buttons in the DOM:</p>
  
  <pre><code>&lt;div class="item-left-edit item-delete enable-pointer-events visible active"&gt;
    &lt;ion-delete-button class="ion-minus-circled button icon button-icon" ng-click="monthCtrl.deleteModule($index, module)" ng-hide="monthCtrl.optionDeleteDisabled(module)"&gt;
    &lt;/ion-delete-button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I remove <code>enable-pointer-events</code> class from <code>div.item-delete</code>, then hovering the element doesn't show hand and the delete-buttons are not clickable => no second popup is opened.</p>
  
  <ul>
  <li><code>enable-pointer-events</code> is defined by <code>{ pointer-events: auto; }</code>.</li>
  <li><code>div.popup-container</code> has z-index: 12</li>
  <li><code>div.item-delete</code> has z-index: 0</li>
  <li><code>ion-item</code> has computed z-index: 2</li>
  <li>found a few other z-index, but the sibling near backdrop (z-index: 11) and popup-container (z-index: 12) containing my list has only z-index: 2.</li>
  </ul>