当前位置：首页 > news >正文

荣泰建设集团网站/重庆今日头条新闻消息

news 2025/7/20 10:22:10

荣泰建设集团网站,重庆今日头条新闻消息,重庆优化网站公司,网站什么时候做负载均衡最近做一个合作项目，对方要求我们做一个web应用程序，然后嵌入到他们的总的wen应用中，风格要求保持一致，于是乎就发了一个html文件过来，大概列举了一下各种控件，对话框的效果。好了，重点说其中的…

　　　　最近做一个合作项目，对方要求我们做一个web应用程序，然后嵌入到他们的总的wen应用中，风格要求保持一致，于是乎就发了一个html文件过来，大概列举了一下各种控件，对话框的效果。

　　　　好了，重点说其中的一个弹出插件，其源码为：

(function($) {$('a[data-reveal-id]').live('click', function(e) {e.preventDefault();var modalLocation = $(this).attr('data-reveal-id');$('#'+modalLocation).reveal($(this).data());});$.fn.reveal = function(options) {var defaults = {  animation: 'fade', //fade, fadeAndPop, noneanimationspeed: 300, //how fast animtions areanimationopacity:0.6,// BG opacitycloseonbackgroundclick: true, //if you click background will modal close?dismissmodalclass: 'close-reveal-modal', //the class of a button or element that will close an open modal
        }; var options = $.extend({}, defaults, options); return this.each(function() {/*---------------------------Global Variables
----------------------------*/var modal = $(this),topMeasure  = parseInt(modal.css('top')),topOffset = modal.height() + topMeasure,locked = false,modalBG = $('.reveal-modal-bg');/*---------------------------Create Modal BG
----------------------------*/if(modalBG.length == 0) {modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);}            /*---------------------------Open and add Closing Listeners
----------------------------*///Open Modal Immediately
            openModal();//Close Modal Listenersvar closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent',closeModal)if(options.closeonbackgroundclick) {modalBG.css({"cursor":"pointer"})modalBG.bind('click.modalEvent',closeModal)}/*---------------------------Open & Close Animations
----------------------------*///Entrance Animations
            function openModal() {modalBG.unbind('click.modalEvent');$('.' + options.dismissmodalclass).unbind('click.modalEvent');if(!locked) {lockModal();if(options.animation == "fadeAndPop") {modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});modalBG.fadeIn(options.animationspeed/2);modal.delay(options.animationspeed/2).animate({"top": $(document).scrollTop()+topMeasure,"opacity" : 1}, options.animationspeed,unlockModal());                    }if(options.animation == "fade") {modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});modalBG.fadeIn(options.animationspeed/2, function(){$(this).css('opacity',options.animationopacity);});modal.delay(options.animationspeed/2).animate({"opacity" : 1}, options.animationspeed,unlockModal());                    } if(options.animation == "none") {modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});modalBG.css({"display":"block"});    unlockModal()                }   }}        //Closing Animation
            function closeModal() {if(!locked) {lockModal();if(options.animation == "fadeAndPop") {modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);modal.animate({"top":  $(document).scrollTop()-topOffset,"opacity" : 0}, options.animationspeed/2, function() {modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});unlockModal();});                    }      if(options.animation == "fade") {modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);modal.animate({"opacity" : 0}, options.animationspeed, function() {modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});unlockModal();});                    }      if(options.animation == "none") {modal.css({'visibility' : 'hidden', 'top' : topMeasure});modalBG.css({'display' : 'none'});    }               }}/*---------------------------Animations Locks
----------------------------*/function unlockModal() { locked = false;}function lockModal() {locked = true;}    });}
})(jQuery);

这个插件的内容就是很简单，你写好如下的HTML,他就弹出一个提示请等待的Modal框，因为是JQuery的插件，所以调用方法其实就一句话：

$Obj.reveal()

其中，$Obj 是一个Jquery对象。这个模态框弹出之后，你点击之后就会关掉。（这个插件依赖Jqeury库，用的朋友你们懂的）

问题来了：这个拓展插件根本没提供程序关闭的方法有木有？？难道只能手动点击才能关掉么？

　　忍不了这破东西，要不是对方规定好了效果，我非得重新弄一个不可。看来，得挽起袖子重写一下了。嗯。

我的基本思路就是，将这个JQuery插件改写为直接用面向对象的方法调用，可以直接关闭的插件，因为这个插件用了太多闭包，看样子改写的幅度还蛮大。

首先引入甘露模型：

/* File Created: 七月 23, 2014 */function Class() {var aDefine = arguments[arguments.length - 1]; //最后一个参数是类定义if (!aDefine) return;var aBase = arguments.length > 1 ? arguments[0] : object; //解析基类
function prototype_() { }; //构造prototype的临时函数，用于挂接原型链prototype_.prototype = aBase.prototype;  //准备传递prototypevar aPrototype = new prototype_();    //建立类要用的prototypefor (var member in aDefine)  //复制类定义到当前类的prototypeif (member != "Create")    //构造函数不用复制aPrototype[member] = aDefine[member];//根据是否继承特殊属性和性能情况，可分别注释掉下列的语句if (aDefine.toString != Object.prototype.toString)aPrototype.toString = aDefine.toString;if (aDefine.toLocaleString != Object.prototype.toLocaleString)aPrototype.toLocaleString = aDefine.toLocaleString;if (aDefine.valueOf != Object.prototype.valueOf)aPrototype.valueOf = aDefine.valueOf;if (aDefine.Create)  //若有构造函数var aType = aDefine.Create  //类型即为该构造函数else    //否则为默认构造函数aType = function () {this.base.apply(this, arguments);   //调用基类构造函数
        };aType.prototype = aPrototype;   //设置类(构造函数)的prototypeaType.Base = aBase;             //设置类型关系，便于追溯继承关系aType.prototype.Type = aType;   //为本类对象扩展一个Type属性return aType;   //返回构造函数作为类
};//根类object定义：
function object() { }    //定义小写的object根类，用于实现最基础的方法等
object.prototype.isA = function (aType)   //判断对象是否属于某类型
{var self = this.Type;while (self) {if (self == aType) return true;self = self.Base;};return false;
};object.prototype.base = function ()  //调用基类构造函数
{var Base = this.Type.Base;  //获取当前对象的基类  if (!Base.Base)  //若基类已没有基类Base.apply(this, arguments)     //则直接调用基类构造函数else    //若基类还有基类         
    {this.base = MakeBase(Base);     //先覆写this.baseBase.apply(this, arguments);    //再调用基类构造函数delete this.base;               //删除覆写的base属性
    };function MakeBase(Type) //包装基类构造函数
    {var Base = Type.Base;if (!Base.Base) return Base; //基类已无基类，就无需包装return function ()   //包装为引用临时变量Base的闭包函数
        {this.base = MakeBase(Base);     //先覆写this.baseBase.apply(this, arguments);    //再调用基类构造函数
        };};
};

O了，这一段如果有不明白的地方，必须得看《悟透Javascript这本书了》我这里篇幅有限，不多介绍了。

接下来，写下自己已经改造好了的插件

/* File Created: 七月 23, 2014 */var CustomerModal = Class({openModal: function () {modalBG.unbind('click.modalEvent');$('.' + this.options.dismissmodalclass).unbind('click.modalEvent');if (!locked) {this.lockModal();if (this.options.animation == "fadeAndPop") {modal.css({ 'top': $(document).scrollTop() - topOffset, 'opacity': 0, 'visibility': 'visible' });modalBG.fadeIn(this.options.animationspeed / 2);modal.delay(this.options.animationspeed / 2).animate({"top": $(document).scrollTop() + topMeasure,"opacity": 1}, this.options.animationspeed, this.unlockModal());}if (this.options.animation == "fade") {modal.css({ 'opacity': 0, 'visibility': 'visible', 'top': $(document).scrollTop() + topMeasure });modalBG.fadeIn(this.options.animationspeed / 2, function () {$(this).css('opacity', 0.6);});modal.delay(this.options.animationspeed / 2).animate({"opacity": 1}, this.options.animationspeed, this.unlockModal());}if (this.options.animation == "none") {modal.css({ 'visibility': 'visible', 'top': $(document).scrollTop() + topMeasure });modalBG.css({ "display": "block" });this.unlockModal()}}},closeModal: function (CModal) {if (!locked) {CModal.lockModal();if (CModal.options.animation == "fadeAndPop") {modalBG.delay(CModal.options.animationspeed).fadeOut(CModal.options.animationspeed);modal.animate({"top": $(document).scrollTop() - topOffset,"opacity": 0}, CModal.options.animationspeed / 2, function () {modal.css({ 'top': topMeasure, 'opacity': 1, 'visibility': 'hidden' });CModal.unlockModal();});}if (CModal.options.animation == "fade") {modalBG.delay(CModal.options.animationspeed).fadeOut(CModal.options.animationspeed);modal.animate({"opacity": 0}, CModal.options.animationspeed, function () {modal.css({ 'opacity': 1, 'visibility': 'hidden', 'top': topMeasure });CModal.unlockModal();});}if (this.options.animation == "none") {modal.css({ 'visibility': 'hidden', 'top': topMeasure });modalBG.css({ 'display': 'none' });}}},unlockModal: function () {locked = false;},lockModal: function () {locked = true;},show: function ($obj, CModal) {this.defaults = {animation: 'fade', //fade, fadeAndPop, noneanimationspeed: 300, //how fast animtions areanimationopacity: 0.6, // BG opacitycloseonbackgroundclick: true, //if you click background will modal close?dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
        };this.options = $.extend({}, this.defaults, this.options);/*---------------------------Global Variables----------------------------*/modal = $obj,topMeasure = parseInt(modal.css('top')),topOffset = modal.height() + topMeasure,locked = false,modalBG = $('.reveal-modal-bg');/*---------------------------Create Modal BG----------------------------*/if (modalBG.length == 0) {modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);}/*---------------------------Open and add Closing Listeners----------------------------*///Open Modal Immediatelythis.openModal();//Close Modal Listenersvar closeButton = $('.' + this.options.dismissmodalclass).bind('click.modalEvent', function () { CModal.closeModal(CModal); });if (this.options.closeonbackgroundclick) {modalBG.css({ "cursor": "pointer" });modalBG.bind('click.modalEvent', function () { CModal.closeModal(CModal) });}/*---------------------------Open & Close Animations----------------------------*///Entrance Animations//Closing Animation/*---------------------------Animations Locks----------------------------*/}
});

调用就很简单了：

m_CustomerModal = new CustomerModal();m_CustomerModal.show($("#watingmodal"),m_CustomerModal);

这个是一个div框而已了，代码如下：

   <div id="watingmodal" class="wating_modal spopup">请等待......</div>

关闭的时候如此调用：

 m_CustomerModal.closeModal(m_CustomerModal);

虽然看起来有那么些别扭，但是Javascript的this关键字是比较特殊的，如果用call其实也是可以的，条条大路通罗马。

当然，别忘了样式：

.spopup{ top:200px;}
.big-link { display:block; margin-top:100px; text-align:center; font-size:16px;}
.reveal-modal-bg { position:fixed; height:100%; width:100%; background:#000; z-index:100; display:none; top:0; left:0; zoom:1; filter:alpha(opacity=70); opacity:0.7;}
.reveal-modal { visibility:hidden; position: absolute; left:50%; margin-left:-300px; background:#EDEDED; z-index:101; border:#ACAEB4 solid 1px; border-radius:5px; behavior:url(js/PIE.htc);}
.reveal-modal .close-reveal-modal { position:absolute; top:6px; right:12px; color:#aaa; cursor:pointer;} 
.reveal-modal .popuptitle{ height:28px; background:url(../images/dot03.gif) 12px 7px no-repeat; padding-left:35px;}
.reveal-modal .popuptitle span{ position:relative; top:6px; line-height:20px; color:#E70000; letter-spacing:1px; font-weight:bold;}
.reveal-modal .popupcontent{ background:#FFF; border:#C0C0C0 solid 1px; margin:0 4px 3px 4px;}
.reveal-modal .popupcontent .popupbut{ width:100%; height:40px; border-top:#C0C0C0 solid 1px; background:#F4F4F4; text-align:right;}
.reveal-modal .popupcontent .popupbut h1{ margin:9px 20px 0 0;}
.reveal-modal .popupcontent .popupbut h1 input{ margin-left:4px;}
.popupbutton{ height:22px; background:url(../images/graybutbg.png) repeat-x; border:#ABADB3 solid 1px; line-height:22px; text-align:center; padding:0 10px; cursor:pointer; color:#333;}
.popupbutton_on{ height:22px; line-height:22px; text-align:center; padding:0 10px; cursor:pointer;}
.wating_modal { visibility:hidden; position: absolute; left:50%; top:300px; margin-left:-200px; z-index:101; color:#FFF; font-weight:bold; font-size:14px; letter-spacing:1px;}