微客导航 » 文章资讯 » jQuery弹框插件使用方法详解

jQuery弹框插件使用方法详解

2023-07-24 04:47:03 177

本文实例为大家分享了jQuery弹框插件使用的具体代码，供大家参考，具体内容如下

要点：

1、匿名函数包裹器（可搜索一下）
2、面向对象的编程
3、插件的要素（扩展jQuery本身的方法，$.extend；给jQuery对象添加方法，对jQuery.prototype进行扩展；添加一个函数到jQuery.fn（jQuery.prototype）对象，该函数的名称就是你的插件名称）
4、代码部分：注意html中a标签的内容，js中格式的注意，css的话嫌麻烦你可以自己定义
5、优点：引用插件后，标签书写正确，无须再调用插件名可直接显示弹框







用户管理-员工管理










clickme

标题

保存取消 ;(function($,window,document,undefined){ $.jModal=function(ele,opt){ vartarget; this.$body=$('body'); this.options=$.extend({},$.jModal.defaults,opt); this.blocker=$(''); target=ele.attr('href'); this.$elm=$(target) if(ele.attr('type')=='open'){ this.open(); } elseif(ele.attr('type')=='close'){ this.hide(); } else{ returnfalse } } $.jModal.prototype={ open:function(){ this.$elm.css({ position:'fixed', width:'440px', height:'auto', fontSize:'var(--base-font-size)', color:'#515355', background:'#fff', boxShadow:'002px1px#eee', top:'50%', left:'50%', transform:'translate(-50%,-50%)', zIndex:3 }); if(this.options.showSpinner){ this.showSpinner() } this.show() }, //遮罩显示 showSpinner:function(){ this.blocker.css({ position:'fixed', width:'9999vw', height:'9999vh', left:0, top:0, background:'#000', opacity:.7, zIndex:2, }) this.$body.append(this.blocker); }, //弹框显示 show:function(){ this.$elm.show() }, //隐藏弹框&移除遮罩 hide:function(){ this.$elm.hide() $('.shadowblock').remove(); } } $.jModal.defaults={ showSpinner:false, } $.fn.jModal=function(options){ new$.jModal(this,options) returnthis } $(document).on('click','a',function(event){ event.preventDefault() $(this).jModal() }) })(jQuery,window,document)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

jQuery弹框插件使用方法详解

热门推荐

随机推荐