I have been thinking about learning Javascript, Ajax, jQuery, etc. for a while, but it seems that I have not written a plug-in yet. After seeing so many eye-catching plug-ins on the jQuery official website, I was tempted today to ask if I could write one. Let’s take a look at a similar plug-in. Now that we understand the basic format of the jQuery plug-in, we can sort out the basic ideas and start working on it. . .
This DivAlert plug-in, as the name suggests, is a page pop-up box, which is equivalent to something like MessageBox.Show() in Winform.
First, let’s define some of the most basic parameters:
Plug-in initialization
(function($) {
$.jDivAlert = function(o) {
//Set basic plug-in information
var options = o || {};
options.width = o.width || 300;
options.height = o.height || 200;
options.title = o.title || "Prompt title";
options.content = o .content || "Prompt content";
Then define a method to create page elements so that they can be reused, abbreviated as js:
function createElement(obj) {
return $(document.createElement(obj));
}
Create background div and set style
var $bgDiv = createElement('div')
.css({ 'position': 'absolute', 'top': '0', 'left': '0', 'z- index': '9999', 'filter': 'alpha(opacity=70)', 'backgroundColor': '#999', 'opacity': '0.7', 'width': document.documentElement.clientWidth "px", 'height': document.documentElement.clientHeight "px" })
.appendTo('body');
Create prompt div
var $outDiv = createElement('div')
.css({ 'position': 'absolute', 'top': ($(window).height() - options.height) / 2 $(window).scrollTop() 'px', 'left': ($(window).width() - options.width) / 2 $(window).scrollLeft() 'px', 'border': '1px solid #cef', 'zIndex': '10000', 'width': options.width 'px', 'height': options. height 'px', 'overflow': 'hidden' })
.appendTo('body');
Create the title part of the prompt div
var $titDiv = createElement("div")
.css({ 'textAlign': ' left', 'backgroundColor': '#54A1D9', 'padding': '8px', 'cursor': 'move', 'height': '20px', 'vertical-align': 'middle' })
.html(options.title)
.appendTo($outDiv);
Create the content part of the prompt div
var $conDiv = createElement("div")
.css({ 'backgroundColor': '#fff', 'textAlign': 'center', 'padding': '12px', 'height': options.height - $titDiv.outerHeight() })
.html(options.content)
.appendTo($outDiv);
Create a close button
var $ clsBtn = createElement("img")
.attr('src', 'del.gif')
.css({ 'cursor': 'pointer', 'float': 'right' })
.click(close)
.appendTo($titDiv);
Create a pop-up box closing event:
function close() {
$bgDiv.fadeOut();
$outDiv.fadeOut();
}
}
})(jQuery);
To see the effect, just add the following code to the script part of the page (of course the jQuery library file is indispensable, the latest version is 1.4. 2. You can download it from the official website http://www.jQuery.com):
$(document).ready(function() {
$.jDivAlert({
width: 300,
height: 300
});
});
It seems that there are still many functions to be improved, hey. . Keep up the good work. . .
Package download address JQuery-based pop-up message plug-in DivAlert journey (1) jQuery-based message prompt Plug-in DivAlert Tour (2) jQuery-based message prompt plug-in DivAlert Tour (3) Recommended
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
