Create Beautiful Dialogs in HTML with "FancyDialog"

Robert Harris -

Introduction:

"FancyDialog" is an open-source GitHub project designed for creating stylish dialogs in HTML documents. It utilizes CSS and JavaScript, making it extremely straightforward and user-friendly.

Key Features:

  • Supports various types of dialogs, including confirmations, warnings, prompts, and more.
  • Allows customization of dialog styles.
  • Supports event handling for dialogs.

How to Use:

Integrating "FancyDialog" into your HTML document is simple. Just add the following code:

<script src="https://unpkg.com/fancydialog/dist/fancydialog.min.js"></script>

<script>
  // Show confirmation dialog
  fancydialog.confirm({
    title: "Confirm",
    message: "Are you sure you want to delete?",
    onConfirm: () => {
      // Confirmation callback
    },
    onCancel: () => {
      // Cancel callback
    },
  });

  // Show warning dialog
  fancydialog.warning({
    title: "Warning",
    message: "This operation is risky. Proceed with caution!",
  });

  // Show prompt dialog
  fancydialog.prompt({
    title: "Prompt",
    message: "Please enter your name:",
    defaultValue: "Bard",
    onConfirm: (value) => {
      // Confirmation callback, 'value' contains the input value
    },
  });
</script>

Please use this code with caution. [Learn more](link to additional details)

Code Example:

Here's an example of how to use "FancyDialog" to create dialogs:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>FancyDialog Example</title>
</head>
<body>
  <h1>FancyDialog Example</h1>
  <p>This is an example of using FancyDialog to create dialogs.</p>
  <p>
    <button onclick="fancydialog.confirm({title: 'Confirm', message: 'Are you sure you want to delete?', onConfirm: () => {alert('Confirmation successful!')}})">Show Confirmation Dialog</button>
  </p>
  <p>
    <button onclick="fancydialog.warning({title: 'Warning', message: 'This operation is risky. Proceed with caution!'})">Show Warning Dialog</button>
  </p>
  <p>
    <button onclick="fancydialog.prompt({title: 'Prompt', message: 'Please enter your name:', defaultValue: 'Bard', onConfirm: (value) => {alert(`Your name is: ${value}`)}})">Show Prompt Dialog</button>
  </p>
</body>
</html>

Please use this code with caution. [Learn more](link to additional details)

After running this example, clicking the "Show Confirmation Dialog," "Show Warning Dialog," or "Show Prompt Dialog" buttons will display the respective dialogs.

"FancyDialog" also supports customization of dialog styles. You can modify the style property to set the background color, text color, font weight, and more.

Here are some example code snippets:

// Set background color to yellow, text color to black, and font weight to normal
fancydialog.confirm({
  title: "Confirm",
  message: "Are you sure you want to delete?",
  style: {
    background: "#ffff00",
    color: "#000000",
    fontWeight: "normal",
  },
});

// Set background color to red, text color to white, and font weight to bold
fancydialog.confirm({
  title: "Confirm",
  message: "Are you sure you want to delete?",
  style: {
    background: "#ff0000",
    color: "#ffffff",
    fontWeight: "bold",
  },
});

Please use this code with caution. [Learn more](link to additional details)

Conclusion:

"FancyDialog" is an incredibly user-friendly dialog tool that allows you to quickly create stylish dialogs in HTML documents.