jquery plugin hiAlert implements web page dialog beautification

  • 2020-06-03 05:52:05
  • OfStack

Tired of the IE warning window, with the thunk of fear, it feels like something bad is about to happen. However, the display effect of the pop-up warning box (alert), confirmation dialog box (confirm) and input dialog box (prompt) of various browsers on web pages is not 1. This article USES the hiAlert plug-in to integrate the dialog style of web pages for you.

hiAlert is an improved version of ES9en.alerts, which includes several commonly used prompt boxes, as well as a gradient prompt bar effect and a pop-up web page layer effect. It is currently compatible with all major browsers.

Method of use

hiAlert offers five ways to use it:

1, hiAlert

hiAlert(content,title,callback);
The hiAlert method provides three arguments, content: content, title: dialog title, callback: callback function.


hiAlert(" Welcome to helloweba.com"," prompt "); 

2, hiConfirm

hiConfirm(content,title,callback);
The hiConfirm method provides three arguments, content: content, title: dialog title, callback: callback function.


hiConfirm(' Are you sure about this operation ?',' Confirmation box ',function(r){ 
  hiOverAlert(' Your response is : ' + r); 
}); 

3, hiPrompt

hiPrompt(content,deinput,title,callback);
hiConfirm method provides four parameters, content: content, deinput: default value of input box, title: dialog title, callback: callback function, if not, do not write, such as:


hiPrompt(' Please fill out the :',' The default value ',' Input box ',function(r){ 
  if(r) hiOverAlert(' So what you fill in is," ' + r+' " '); 
}); 

4, hiBox

hiBox(obj,title,w,h,submit,cancel,callback)
hiBox methods provide seven parameters, obj: open the objects is specified object (1), namely the contents of the dialog box shown in the associated object, title: title, w: width, h: height, submit: can set the content of the object to "submit", if there is a callback, click here to return to callback behavior, cancel: cancel or close button in the dialog object, callback: callback functions, such as:


hiBox('#showbox', ' The title ',400,'','','.a_close'); 

5, hiOverAlert

hiOverAlert(content,timeout);
hiOverAlert is used to display the effect of message prompt bar, similar to the effect in this article, it provides two parameters, content: prompt content, timeout: prompt time, default is 3000, that is, 3 seconds. Such as:


hiOverAlert(' Operation prompt message ',1500); 

Remember to load the jQuery library and hiAlert plug-ins, as well as the corresponding css style, when using. You can also modify CSS to further beautify the dialog box. In addition, if you need to drag effect dialog box, you need to load the jquery. The ui. draggable. js, can go to for details.

This is the end of this article, I hope you enjoy it.


Related articles: