const paneModal = new CupertinoPane('.modal', { modal: { transition: 'zoom' // 'zoom' || 'fade' }, 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 - Zoom Transition</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>Zoom Transition modal</h1> <p>Modal with default zoom built-in transition, and with automatically calculated modal height.</p> <p>Try to move this modal</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; }