想著自己學(xué)習(xí)Javascript，以及Ajax、jQuery等已經(jīng)有一段時(shí)間了，不過貌似還沒有寫過一個(gè)插件，看到j(luò)Query官網(wǎng)上那么多令人眼前一亮的插件，自己今天也動(dòng)心說是不是能夠?qū)懸粋€(gè)類似的插件來瞧瞧，了解了jQuery插件的基本格式，理一下基本的思路，動(dòng)工吧。。。

這個(gè)DivAlert插件，顧名思義就是頁面彈出框，也就相當(dāng)于Winform里面MessageBox.Show()那樣的東西。

首先，我們來定義一下一些最基本的參數(shù)：

插件初始化

(function($) {

$.jDivAlert = function(o) {

//設(shè)置插件基本信息

var options = o || {};

options.width = o.width || 300;

options.height = o.height || 200;

options.title = o.title || "提示標(biāo)題";

options.content = o.content || "提示內(nèi)容";

隨后定義一個(gè)創(chuàng)建頁面元素的方法，這樣可以重用，簡寫js：

function createElement(obj) {

return $(document.createElement(obj));

}

創(chuàng)建背景div及設(shè)定樣式

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');

創(chuàng)建提示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');

創(chuàng)建提示div的標(biāo)題部分

var $titDiv = createElement("div")

.css({ 'textAlign': 'left', 'backgroundColor': '#54A1D9', 'padding': '8px', 'cursor': 'move', 'height': '20px', 'vertical-align': 'middle' })

.html(options.title)

.appendTo($outDiv);

創(chuàng)建提示div的內(nèi)容部分

var $conDiv = createElement("div")

.css({ 'backgroundColor': '#fff', 'textAlign': 'center', 'padding': '12px', 'height': options.height - $titDiv.outerHeight() })

.html(options.content)

.appendTo($outDiv);

創(chuàng)建關(guān)閉按鈕

var $clsBtn = createElement("img")

.attr('src', 'del.gif')

.css({ 'cursor': 'pointer', 'float': 'right' })

.click(close)

.appendTo($titDiv);

創(chuàng)建彈出框關(guān)閉事件：

function close() {

$bgDiv.fadeOut();

$outDiv.fadeOut();

}

}

})(jQuery);

要看到使用效果，在頁面script部分加入如下代碼即可(當(dāng)然jQuery庫文件不可少啊，現(xiàn)在最新版是1.4.2，可以去官網(wǎng)http://www.jQuery.com下載)：

$(document).ready(function() {

$.jDivAlert({

width: 300,

height: 300

});

});

貌似還有很多功能有待完善，哎。。繼續(xù)努力。。。

打包下載地址

基于jQuery的彈出消息插件 DivAlert之旅(一)

基于jQuery的消息提示插件 DivAlert之旅(二)

總結(jié)

以上是生活随笔為你收集整理的div alert html,基于jQuery的弹出消息插件 DivAlert之旅（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。