Edit in JSFiddle

JavaScript
HTML
CSS

const paneModal = new CupertinoPane('.modal', { 
  modal: {
    transition: 'zoom',
    flying: true,
		dismissOnIntense: true
  },
  backdrop: true,
  events: {
    onBackdropTap: () => dismiss()
  }
});

function present() {
  paneModal.present({animate: true});
}

function dismiss() {
  paneModal.destroy({animate: true});
}

window.onload = async function () {
  present();
}

<!DOCTYPE html>
<html mode="ios" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title>Panes - Modal - Dismiss-on-Intense</title>
    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  </head>
  <body mode="ios">
    <ion-app>
      <ion-content>
          <!-- Panes -->
          <div class="modal">
            <h1>Dismiss-on-Intense modal</h1>
            <p>Modal will be nicely dismissed on high intense move events.</p>
            <p>Try to move pane out of the screen</p>
            <ion-button expand="block" onclick="dismiss();">
              Dismiss Modal
            </ion-button>
          </div>
          <ion-button expand="block" onclick="present();">
            Present Modal
          </ion-button>
      </ion-content>
    </ion-app>
  </body>
</html>

.modal {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-top: 5px;
}