自制轻量级仿jQuery.boxy对话框插件代码

　　对此，jquery.boxy插件已经做得非常强大了，常用的提示、确认，拖拽、改变大小、异步加载都非常实用，导致文件较大（可忽略不计），很多功能并不需要，为此，抱着在边学边实践的态度和想法，自制一款适用于本项目的轻量级弹出层插件，这是第一次写jqeury插件，也为了以后能将常用操作封装为jquery插件做准备吧。

　　首先来个插件名字，这样才能去唬人，就叫jquey.cvbox.min.js吧，cv就是网站域名ChinaValue的缩写，压缩后的容量控制在6K以下。因为还未完成，所以先将思想记录下来。

　　1.在页面增加用来显示内容的容器元素，以及弹出层的背景，仅只需要有就可以了，至于说在哪儿出生（也就是显示在页面什么位置）、长成什么样儿，后边会培养（设置），样子自然要由美术指导来打扮了。

　　2.根据我们的需要，我们事先定义好常用的一些对象，比如说遮罩的背景、弹出层的容器、弹出层的标题栏、弹出层的内容区域、以及当前浏览器窗口的高宽等，有了这些，在后边的使用中就方便多了。

　　3.开始往容器中塞内容，内容可以是一句提示语（对应提示功能），可以是询问语（对应确认框），可以是一张图片（比如用于小图放大），还可以是一段HTML代码（代替直接在JS中写HTML的不便）。

　　4.定义用户点击关闭的事件，也就是隐藏或者移除背景层和弹出层，留着给操作完成时调用。

　　5.设置背景层透明度以及滚动高度，设置弹出层的位置，居中随滚动或者固定不动。

　　6.最后，为了方便多个场合中使用，提取可变参数，参数要有默认值，使用$.extend搞定。

　　预计将于节后发布测试版，还是未删节的。

　　在线演示：http://demo.glzy8.com/js/jquery_cvbox/index.htm

　　打包下载：http://xiazai.glzy8.com/201010/yuanma/jquery_cvbox.rar

　　jquery.cvbox.min.js代码

复制代码代码如下:

　　* JQuery.cvbox.js

　　* http://www.chinavalue.net

　　* J.Wang

　　* http://0417.cnblog.socm

　　* 2010.09.30

　　(function($) {

　　$.fn.cvbox = function(options) {

　　var self = $(this);

　　var defaults = {

　　titleBarText: "",

　　titleBarClose: "关闭",

　　bgClickClose: false,

　　bgShow: true,

　　bgOpacity: 0.2,

　　confirmText: "",

　　alertText: "",

　　delayClose: 0,

　　submitAfter: function() {

　　$.noop();

　　}

　　};

　　var param = $.extend({}, defaults, options || {});

　　//弹框的显示

　　var cvBoxElement = '<div id="cvBoxShade" class="cvBoxShade"></div>';

　　cvBoxElement += '<div id="cvBoxBorder" class="cvBoxBorder">';

　　cvBoxElement += '<div id="cvBoxTitleBar" class="cvBoxTitleBar"><div class="cvBoxTitleBarText">' + param.titleBarText + '</div><div class="cvBoxTitleBarClose"><a href="javascript:void(0);" id="cvBoxTitleBarClose">' + param.titleBarClose + '</a></div><div class="cvBoxClear"></div></div>';

　　cvBoxElement += '<div id="cvBoxBody" class="cvBoxBody"></div>';

　　cvBoxElement += '</div>';

　　if ($("#cvBoxBorder").size()) {

　　$("#cvBoxBorder").show();

　　if (param.bgShow) {

　　$("#cvBoxShade").show();

　　}

　　else {

　　$("#cvBoxShade").hide();

　　}

　　else {

　　$("body").append(cvBoxElement);

　　}

　　//一些元素对象，浏览器宽高，滚动高度，页面高度

　　var cbBg = $("#cvBoxShade");

　　var cbBorder = $("#cvBoxBorder");

　　var cbTitleBar = $("#cvBoxTitleBar");

　　var cbBody = $("#cvBoxBody");

　　var w, h, st, ph;

　　var cb = {

　　//装载的内容

　　content: function() {

　　var text;

　　if (param.confirmText != "") {

　　text = $('<div class="cvBoxBodyBtn">' + param.confirmText + '<p><input type="button" id="cvBoxBtnSubmit" class="cvBoxBtnSubmit" value="确认" /> <input type="button" id="cvBoxBtnCancel" class="cvBoxBtnCancel" value="取消" /></p></div>');

　　}

　　else if (param.alertText != "") {

　　text = $('<div class="cvBoxBodyBtn">' + param.alertText + '<p><input type="button" id="cvBoxBtnSubmit" class="cvBoxBtnSubmit" value="确认" /></p></div>');

　　}

　　else {

　　self.show();

　　text = self;

　　}

　　return text;

　　hw: function(obj) {

　　//获取任意元素的高宽

　　var hwSize = {};

　　$('<div id="cbBox" style="position:absolute;left:-999px;"></div>').appendTo("body").append(obj.clone());

　　hwSize.w = $("#cbBox").width();

　　hwSize.h = $("#cbBox").height();

　　$("#cbBox").remove();

　　return hwSize;

　　//黑背景的宽高透明度等，弹框的位置

　　position: function() {

　　w = $(window).width(), h = $(window).height(), st = $(window).scrollTop(), ph = $(document).height();

　　cbBg.width(w).height(ph).css("opacity", param.bgOpacity);

　　//主体内容的位置

　　var x_size = cb.hw(cb.content());

　　var xh = x_size.h, xw = x_size.w;

　　var t = st + (h - xh) / 2, l = (w - xw) / 2;

　　cbBorder.css({

　　width: xw,

　　top: t,

　　left: l,

　　zIndex: 9999

　　});

　　//定位

　　posfix: function() {

　　if (window.XMLHttpRequest) {

　　cbBorder.css("position", "fixed");

　　} else {

　　$(window).scroll(function() {

　　cb.position();

　　});

　　}

　　//居中

　　center: function() {

　　$(window).resize(function() {

　　cb.position();

　　});

　　bgclick: function() {

　　cbBg.click(function() {

　　cb.hide();

　　});

　　bghide: function() {

　　cbBg.hide();

　　//弹框的隐藏

　　hide: function() {

　　if (param.confirmText == "" && param.alertText == "") {

　　cb.content().hide().appendTo($("body"));

　　}

　　//cbBorder.fadeOut(300);

　　cbBorder.remove();

　　cbBg.remove();

　　return false;

　　barhide: function() {

　　cbTitleBar.hide();

　　show: function() {

　　if (cbBody.html() == "") {

　　cbBody.append(cb.content());

　　}

　　cb.position();

　　cb.center();

　　if (param.titleBarText == "") {

　　cb.barhide();

　　}

　　if (!param.bgShow) {

　　cb.bghide();

　　}

　　if (param.bgClickClose) {

　　cb.bgclick();

　　}

　　if (param.delayClose > 0) {

　　setTimeout(cb.hide, param.delayClose);

　　}

　　};

　　cb.show();

　　//一些事件的绑定

　　$("#cvBoxBtnSubmit").bind("click", function() {

　　if (param.confirmText != ""){

　　param.submitAfter();

　　}

　　cb.hide();

　　});

　　$("#cvBoxBtnCancel").bind("click", function() {

　　cb.hide();

　　});

　　$("#cvBoxTitleBarClose").bind("click", function() {

　　cb.hide();

　　});

　　}

　　})(jQuery);

　　完整的测试代码

复制代码代码如下:

　　DIV.postCon {

　　FONT-SIZE: 12px; COLOR: #666666

　　}

　　DIV.postBody {

　　FONT-SIZE: 12px; COLOR: #666666; LINE-HEIGHT: 150%

　　}

　　.mySearch {

　　DISPLAY: none

　　}

　　#mainContent {

　　MARGIN-TOP: 5px; MARGIN-LEFT: 5px

　　}

　　#author_profile {

　　DISPLAY: none

　　}

　　.postCon A {

　　COLOR: #0099ff

　　}

　　.postBody A {

　　COLOR: #0099ff

　　}

　　.feedbackCon A {

　　COLOR: #0099ff

　　}

　　#sideBar {

　　BORDER-RIGHT: #ced7ce 1px solid; BORDER-TOP: #ced7ce 1px solid; MARGIN: 0px 0px 0px 4px; BORDER-LEFT: #ced7ce 1px solid; WIDTH: auto; BORDER-BOTTOM: #ced7ce 1px solid; POSITION: fixed; TOP: 24%

　　}

　　.newsItem {

　　DISPLAY: none

　　}

　　#calendar {

　　DISPLAY: none

　　}

　　.catListLink {

　　DISPLAY: none

　　}

　　.catListComment {

　　DISPLAY: none

　　}

　　.catListFeedback {

　　DISPLAY: none

　　}

　　#sideBarMain {

　　DISPLAY: none

　　}

　　#EntryTag {

　　DISPLAY: none

　　}

　　.catListTag {

　　DISPLAY: none

　　}

　　.cvBoxShade {

　　Z-INDEX: 2000; BACKGROUND: #ccc; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 0px

　　}

　　.cvBoxBorder {

　　BORDER-RIGHT: #000000 0px solid; PADDING-RIGHT: 8px; BORDER-TOP: #000000 0px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; Z-INDEX: 2000; PADDING-BOTTOM: 8px; BORDER-LEFT: #000000 0px solid; WIDTH: 100%; PADDING-TOP: 8px; BORDER-BOTTOM: #000000 0px solid; POSITION: absolute; BACKGROUND-COLOR: #ccc

　　}

　　.cvBoxBorder A {

　　COLOR: #486aaa; TEXT-DECORATION: none

　　}

　　.cvBoxBorder A:hover {

　　COLOR: #c00; TEXT-DECORATION: none

　　}

　　.cvBoxTitleBar {

　　WIDTH: 100%; LINE-HEIGHT: 27px; HEIGHT: 26px; BACKGROUND-COLOR: #eeeeee

　　}

　　.cvBoxTitleBarText {

　　PADDING-LEFT: 10px; FONT-WEIGHT: bold; FLOAT: left; COLOR: #333

　　}

　　.cvBoxTitleBarClose {

　　PADDING-RIGHT: 10px; FLOAT: right; COLOR: #3867af; FONT-FAMILY: Verdana

　　}

　　.cvBoxTitleBarClose IMG {

　　BORDER-TOP-WIDTH: 0px; DISPLAY: block; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 4px 0px 0px; BORDER-RIGHT-WIDTH: 0px

　　}

　　.cvBoxBody {

　　WIDTH: 100%; BACKGROUND-COLOR: #ffffff

　　}

　　.cvBoxBodyBtn {

　　PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 20px; PADDING-TOP: 20px

　　}

　　.cvBoxBodyBtn P {

　　MARGIN: 20px 0px 0px

　　}

　　.cvBoxBtnSubmit {

　　BORDER-RIGHT: #34538b 1px solid; BORDER-TOP: #34538b 1px solid; BACKGROUND: #486aaa; BORDER-LEFT: #34538b 1px solid; WIDTH: 60px; CURSOR: pointer; COLOR: #fff; LINE-HEIGHT: 23px; BORDER-BOTTOM: #34538b 1px solid; HEIGHT: 24px

　　}

　　.cvBoxBtnCancel {

　　BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; BACKGROUND: #eee; BORDER-LEFT: #ccc 1px solid; WIDTH: 60px; CURSOR: pointer; COLOR: #333; LINE-HEIGHT: 23px; BORDER-BOTTOM: #ccc 1px solid; HEIGHT: 24px

　　}

　　.cvBoxClear {

　　CLEAR: both; PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FONT-SIZE: 1px; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1px; PADDING-TOP: 0px

　　}

　　</style>

　　<body>

　　<div>

　　未压缩版本是6K大小，压缩后只有2K大，应该算很轻了。</div>

　　<div>

　　<a id="A1" href="javascript:void(0);">1.弹出提示框，点击查看效果。</a>

　　<script type="text/javascript">// <![CDATA[

　　$("#A1").click(function() {

　　$(this).cvbox({

　　titleBarText: "弹出提示框",

　　alertText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚"

　　});

　　// ]]></script>

　　</div>

　　<pre class="brush:javascript">$(this).cvbox({

　　titleBarText: "弹出提示框",

　　alertText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚"

　　});

　　</pre>

　　</div>

　　<div>

　　<a id="A2" href="javascript:void(0);">2.弹出提示框1秒后自动关闭，点击查看效果。</a>

　　<script type="text/javascript">// <![CDATA[

　　$("#A2").click(function() {

　　$(this).cvbox({

　　titleBarText: "弹出提示框1秒后自动关闭",

　　alertText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚",

　　delayClose: 1000

　　});

　　// ]]></script>

　　</div>

　　<pre class="brush:javascript">$("#A2").click(function() {

　　$(this).cvbox({

　　titleBarText: "弹出提示框1秒后自动关闭",

　　alertText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚",

　　delayClose:1000

　　});

　　</pre>

　　</div>

　　<div>

　　<a id="A3" href="javascript:void(0);">3.弹出对话框，点击查看效果。</a>

　　<script type="text/javascript">// <![CDATA[

　　$("#A3").click(function() {

　　$(this).cvbox({

　　titleBarText: "弹出对话框",

　　confirmText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚<br /><br />你确认你爸是李刚吗？",

　　submitAfter: HelloLiGang

　　});

　　function HelloLiGang() {

　　alert("对您爸爸的敬仰犹如滔滔江水连绵不绝！");

　　}

　　// ]]></script>

　　</div>

　　<pre class="brush:javascript">$("#A3").click(function() {

　　$(this).cvbox({

　　titleBarText: "弹出对话框",

　　confirmText: "世界上最远的距离不是生与死的距离<br />而是我在你面前<br />你却不知道我爸爸是李刚<br

　　/><br />你确认你爸是李刚吗？",

　　submitAfter:HelloLiGang

　　});

　　function HelloLiGang(){

　　alert("对您爸爸的敬仰犹如滔滔江水连绵不绝！");

　　}

　　</pre>

　　</div>

　　<div>

　　<a id="A4" href="javascript:void(0);">4.载入一段HTML内容，点击查看效果。</a>

　　<div>

　　通常这段内容的display都设置为hidden，此处只是为了演示该HTML内容是在当前页面，而不是动态write出来的，可查看页面源文

　　件。

　　<br />

　　内容可以是任意元素，包括iframe也可以。

　　</div>

　　<div>

　　</div>

　　<script type="text/javascript">// <![CDATA[

　　$("#A4").click(function() {

　　$(".A4Demo").cvbox({

　　titleBarText: "载入一段HTML内容"

　　});

　　// ]]></script>

　　</div>

　　<div>

　　通常这段内容的display都设置为hidden，此处只是为了演示该HTML内容是在当前页面，而不是动态write出来的，可查看页面源文件。

　　<br />

　　内容可以是任意元素，包括iframe也可以。

　　</div>

　　<div>

　　<iframe width="100%" frameborder="0" src="http://a.cvimg.cn/UploadFile/MiniBlog/2010/10-20/7a09cf13-eeb6-491b-aa63-

　　18dd67bde0a1_Big.jpg"></iframe>

　　</div>

　　</pre>

　　</div>

　　<br />

　　<pre class="brush:javascript">$("#A4").click(function() {

　　$(".A4Demo").cvbox({

　　titleBarText: "载入一段HTML内容"

　　});

　　</pre>

　　</div>

　　<div>

　　<br />目前只是很简单的应用，后续增加位置的参数，使对话层不局限于只显示在屏幕中间。

　　</div>

　　if ($ != jQuery) {

　　$ = jQuery.noConflict();

　　}

　　</script>

　　</body>

教程首页更多教程