Наложения всплывающего окна подтверждения – популярный компонент пользовательского интерфейса, используемый для отображения важных сообщений или сбора данных пользователя в визуально привлекательной форме. В этой статье мы рассмотрим 10 различных методов создания наложений всплывающих окон подтверждения. Каждый метод будет сопровождаться примером кода, который поможет вам реализовать их в ваших проектах веб-разработки.

Метод 1: использование функции оповещения JavaScript
Пример кода:

alert("Are you sure you want to proceed?");

Метод 2: использование функции подтверждения JavaScript
Пример кода:

if (confirm("Are you sure you want to proceed?")) {
    // User clicked 'OK'
} else {
    // User clicked 'Cancel'
}

Метод 3: использование модального окна Bootstrap
Пример кода:

<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmModalLabel">Confirmation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure you want to proceed?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

Метод 4. Использование диалогового окна пользовательского интерфейса jQuery
Пример кода:

$("#confirmDialog").dialog({
    resizable: false,
    height: "auto",
    width: 400,
    modal: true,
    buttons: {
        "OK": function() {
            // User clicked 'OK'
            $(this).dialog("close");
        },
        "Cancel": function() {
            // User clicked 'Cancel'
            $(this).dialog("close");
        }
    }
});

Метод 5: использование SweetAlert2
Пример кода:

Swal.fire({
    title: 'Confirmation',
    text: 'Are you sure you want to proceed?',
    icon: 'question',
    showCancelButton: true,
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel'
}).then((result) => {
    if (result.isConfirmed) {
        // User clicked 'OK'
    } else if (result.dismiss === Swal.DismissReason.cancel) {
        // User clicked 'Cancel'
    }
});

Метод 6: использование модального режима React
Пример кода:

import React, { useState } from 'react';
import Modal from 'react-modal';
const ConfirmModal = () => {
    const [isOpen, setIsOpen] = useState(false);
    const handleConfirm = () => {
        // User clicked 'OK'
        setIsOpen(false);
    };
    const handleCancel = () => {
        // User clicked 'Cancel'
        setIsOpen(false);
    };
    return (
        <div>
            <button onClick={() => setIsOpen(true)}>Open Confirm Modal</button>
            <Modal isOpen={isOpen}>
                <h2>Confirmation</h2>
                <p>Are you sure you want to proceed?</p>
                <button onClick={handleConfirm}>OK</button>
                <button onClick={handleCancel}>Cancel</button>
            </Modal>
        </div>
    );
};
export default ConfirmModal;

Метод 7: использование Vue.js и диалогового окна Vuetify
Пример кода:

<template>
    <div>
        <v-dialog v-model="confirmDialog" max-width="500">
            <v-card>
                <v-card-title>Confirmation</v-card-title>
                <v-card-text>Are you sure you want to proceed?</v-card-text>
                <v-card-actions>
                    <v-btn color="red" text @click="confirmDialog = false">Cancel</v-btn>
                    <v-btn color="green" text @click="proceed">OK</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-btn @click="confirmDialog = true">Open Confirm Dialog</v-btn>
    </div>
</template>
<script>
export default {
    data() {
        return {
            confirmDialog: false
        };
    },
    methods: {
        proceed() {
            // User clicked 'OK'
            this.confirmDialog = false;
        }
    }
};
</script>

Метод 8: использование диалогового окна Angular Material
Пример кода:

import { Component } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
@Component({
  ...
})
export class ConfirmDialogComponent {
  constructor(public dialogRef: MatDialogRef<ConfirmDialogComponent>) {}
  onCancelClick(): void {
    // User clicked 'Cancel'
    this.dialogRef.close();
  }
  onOkClick(): void {
    // User clicked 'OK'
    this.dialogRef.close();
  }
}

Метод 9: использование виджета showDialog Flutter
Пример кода:

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('Confirmation'),
      content: Text('Are you sure you want to proceed?'),
      actions: [
        TextButton(
          child: Text('Cancel'),
          onPressed: () {
            // User clicked 'Cancel'
            Navigator.of(context).pop();
          },
        ),
        TextButton(
          child: Text('OK'),
          onPressed: () {
            // User clicked 'OK'
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

Метод 10: использование Swift UIAlertController
Пример кода:

let alertController = UIAlertController(title: "Confirmation", message: "Are you sure you want to proceed?", preferredStyle: .alert)
let cancelAction = UIAlertAction(title: "Cancel", style: .cancel) { (_) in
    // User clicked 'Cancel'
}
let okAction = UIAlertAction(title: "OK", style: .default) { (_) in
    // User clicked 'OK'
}
alertController.addAction(cancelAction)
alertController.addAction(okAction)
present(alertController, animated: true, completion: nil)

Всплывающее окно подтверждения наложения обеспечивает элегантный способ взаимодействия с пользователями и сбора их информации. В этой статье мы рассмотрели 10 различных методов создания наложений подтверждения всплывающих окон с использованием различных языков программирования и платформ. Предпочитаете ли вы использовать JavaScript, библиотеки, такие как Bootstrap или jQuery UI, или фреймворки, такие как React или Angular, теперь у вас есть целый ряд вариантов на выбор. Включите эти методы в свои проекты веб-разработки, чтобы улучшить взаимодействие с пользователем и повысить интерактивность.