Dialogs and Prompts

Dialogs and Prompts

Dialog Boxes and Preset Prompts

app.dialog has presets: alert(text, title, callback), confirm(text, title, onOk, onCancel), prompt(text, title, onOk, onCancel), login(), password(), preloader() and progress(). app.dialog.create() builds anything else from title, text and buttons. Unlike window.confirm(), none blocks JavaScript; they call you back. The Cart tab's new Clear link asks confirm('Remove all 3 books from your cart?', 'Clear cart', ...), and switching on gift wrap asks for a card message:

A prompt when gift wrap is switched on, in src/pages/checkout.f7JavaScript

    const giftChanged = (e) => {
      if (!e.target.checked) return;
      $f7.dialog.prompt('A short message for the gift card', 'Gift wrap', (text) => {
        giftMessage = text.trim();
        console.log(`gift message: "${giftMessage}"`);
        $update();
      }, () => console.log('no gift message'));
    };

Tapping Cancel on the confirm, then typing a message and OK on the prompt, logged:

Output of 58

clear cancelled
gift message: "Happy birthday, Sam!"

The Clear cart confirm in iOS (A), and the gift-message prompt in Material (B)

Keep dialogs for decisions that must be answered now; a toast or notification tells news without blocking.

MENU