📌  相关文章
📜  jQuery-Alertify.js(1)

📅  最后修改于: 2023-12-03 15:32:14.881000             🧑  作者: Mango

jQuery-Alertify.js

jQuery-Alertify.js is a lightweight and customizable JavaScript library for creating modals and alert boxes. It is built on top of jQuery and uses CSS3 transitions for animations, making it fast and responsive.

Features
  • Easy to Use: You can create a modal or an alert in just a few lines of code.
  • Customizable: The library provides several options and themes to customize your modals and alerts.
  • Lightweight: The minified version is only 10KB in size, making it a great choice for projects with size constraints.
  • Responsive: The modals and alerts are optimized for different screen sizes, ensuring that they look great on any device.
Installation

jQuery-Alertify.js can be installed using npm or by downloading the source files from GitHub.

npm install jquery-alertify
Usage

To use jQuery-Alertify.js, include the library and its CSS file in your HTML file.

<head>
  <link rel="stylesheet" href="alertify.css" />
  <script src="jquery.js"></script>
  <script src="alertify.js"></script>
</head>

You can then create a basic alert box using the alert method.

alertify.alert('Title', 'Message');

This will display an alert box with a title and a message.

Options

jQuery-Alertify.js provides several options that can be passed as an object to the method. Here are some of the most commonly used options:

  • title: The title of the modal or alert box.
  • message: The message to be displayed in the modal or alert box.
  • onok: Function to be called when the OK button is clicked.
  • oncancel: Function to be called when the Cancel button is clicked.
  • modal: Whether to show the modal or alert box as a modal or not (default is true).
  • movable: Whether the modal can be moved around (default is true).
  • closable: Whether the modal or alert box can be closed (default is true).
  • transition: The type of transition to be used (default is fade).
Themes

jQuery-Alertify.js provides several themes to customize the modals and alerts. You can include a theme by adding the respective CSS file to your HTML file after including alertify.css.

<head>
  <link rel="stylesheet" href="alertify.css" />
  <link rel="stylesheet" href="alertify.default.css" />
  <script src="jquery.js"></script>
  <script src="alertify.js"></script>
</head>

The default theme is alertify.default.css, but you can use any of the following themes:

  • alertify.bootstrap.css
  • alertify.default.css
  • alertify.semantic.css
Conclusion

jQuery-Alertify.js is a simple and efficient way to create modals and alert boxes. It provides several options and themes to customize the appearance and behavior of the modals and alerts. Its lightweight size makes it an ideal choice for projects with size constraints.