Всплывающие окна Telegram

Изучите нативную систему попапов Telegram с методами showPopup, showAlert и showConfirm. Эти окна появляются в интерфейсе Telegram с нативными стилями и анимациями.

Custom Popup

The showPopup method allows you to create custom popups with multiple buttons and different button types. You can customize the title, message, and button configuration.

Popup Title

Popup Message

Show Code

import * as tg from './lib/tg';

// Show custom popup with multiple buttons
tg.showPopup(
  {
    title: 'Custom Popup',
    message: 'This is a custom popup with multiple buttons!',
    buttons: [
      { id: 'save', type: 'default', text: 'Save' },
      { id: 'delete', type: 'destructive', text: 'Delete' },
      { id: 'cancel', type: 'cancel', text: 'Cancel' },
    ],
  },
  (buttonId) => {
    console.log('Button clicked:', buttonId);
    tg.hapticImpact('medium');
  }
);

// Button types:
// - 'default': Regular button
// - 'ok': OK button (default)
// - 'close': Close button
// - 'cancel': Cancel button
// - 'destructive': Red/destructive action button

Alert

The showAlert method displays a simple alert message with an OK button. It's useful for showing informational messages or notifications to the user.

Show Code

import * as tg from './lib/tg';

// Show alert with callback
tg.showAlert('This is an alert message.', () => {
  console.log('Alert dismissed');
  tg.hapticNotification('success');
});

// Browser fallback: Uses native alert() when not in Telegram

Confirm

The showConfirm method displays a confirmation dialog with OK and Cancel buttons. The callback receives a boolean indicating whether the user confirmed or cancelled.

Show Code

import * as tg from './lib/tg';

// Show confirm dialog
tg.showConfirm('Do you want to proceed?', (confirmed) => {
  if (confirmed) {
    console.log('User confirmed');
    tg.hapticNotification('success');
  } else {
    console.log('User cancelled');
    tg.hapticNotification('warning');
  }
});

// Browser fallback: Uses native confirm() when not in Telegram

Button Types Reference

default Regular button with default styling

ok OK button (used in alerts)

close Close button (dismisses popup)

cancel Cancel button (negative action)

destructive Destructive action button (red/warning)