Popup 弹窗
简介
与dialog不同的是,popup插件讲究轻便、简单、有效,对于短小内容提示使用popup是非常适合的。本插件基于popper.js
定位引擎改造而来,所使用的版本是v2.10.2。popper.js是目前最受欢迎使用最广的窗口定位插件,详见官网或Github。
- data-popper-*属性均改成data-*
- 对placement参数新增一个选项:center(在浏览器中绝对定位弹出)
使用方法
插件运行方式有两种:
- ax*属性:对按钮使用
axPopup
属性,配合使用data-content
参数即可按默认参数运行插件。
- js实例:通过
new axPopup('#ID',{content:''})
方式创建实例运行。
<a href="###" class="ax-btn ax-primary" axPopup data-content="伟大的中国">点击打开小窗</a>
<a href="###" class="ax-btn ax-primary" id="btnDft">JS打开小窗</a>
窗口方向
通过设定placement
参数,使窗口放置在按钮周围各个角度,可选用的值有如下:
- top(按钮正上方),top-start(按钮正上方左侧),top-end(按钮正上方右侧)
- bottom(按钮正下方),bottom-start(按钮正下方左侧),bottom-end(按钮正下方右侧)
- left(按钮左侧居中),left-start(按钮左侧左上方向),left-end(按钮左侧左下方向)
- right(按钮右侧居中),right-start(按钮右侧右上方向),right-end(按钮右侧右下方向)
- center(绝对居中弹出),在移动端popup窗口均已center方式弹出
弹出和关闭动画
用户根据需要使用in
和out
参数设定打开和关闭动画样式。动画的时间默认是100ms,用户可使用duration
参数设置合适的时间,单位ms。
- in,打开动画,可选:fadeIn(默认),fadeInUp,slideDown,fadeInDown,fadeInLeft,fadeInRight,springIn,scaleIn
- out,关闭动画,可选:fadeOut(默认),fadeOutUp,slideUp,fadeOutDown,fadeOutLeft,fadeOutRight,springOut,scaleOut
这几个常用动画已经能满足大多数场景,用户可自行引入第三方动画库以实现更多的动画效果。
<a href="###" class="ax-btn ax-primary" axPopup data-content="#china" data-in="fadeIn" data-out="fadeOut">渐显渐隐(默认)</a>
<a href="###" class="ax-btn ax-primary" axPopup data-content="#china" data-in="fadeInUp" data-out="fadeOutDown" data-duration="300ms">向上渐显向下渐隐</a>
<a href="###" class="ax-btn ax-primary" axPopup data-content="#china" data-in="fadeInDown" data-out="fadeOutUp" data-duration="300ms">向下渐显向上渐隐</a>
<a href="###" class="ax-btn ax-primary" axPopup data-content="#china" data-in="slideDown" data-out="slideUp" data-duration="300ms">逐步显示逐步隐藏</a>
<div class="ax-break"></div>
<a href="###" class="ax-btn ax-primary" axPopup data-content="#china" data-in="fadeInLeft" data-out="fadeOutRight" data-duration="300ms">向左渐显向右渐隐</a>
<a href="###" class="ax-btn ax-primary" axPopup data-content="#china" data-in="fadeInRight" data-out="fadeOutLeft" data-duration="300ms">向右渐显向左渐隐</a>
<a href="###" class="ax-btn ax-primary" axPopup data-content="#china" data-in="scaleIn" data-out="scaleOut" data-duration="300ms">放大打开缩小关闭</a>
<a href="###" class="ax-btn ax-primary" axPopup data-content="#china" data-in="springIn" data-out="springOut" data-duration="300ms">弹出弹回</a>
分步操作
插件默认对同一个按钮进行显示隐藏操作,借助instance.show()
和instance.hide()
的方法,对于某些场景可通过多个按钮分步操作。比如第一个按钮用于小窗定位,第二个按钮点击显示,第三个按钮点击隐藏。
注意:因为默认点击窗口之外是可以关闭窗口的,那么为了保证分步操作,需要给实例使用pageClose:false
属性,也就是禁止点击窗口外关闭窗口。
-
<a href="###" class="ax-btn ax-primary" id="btnPos">定位窗口</a>
<a href="###" class="ax-btn ax-primary" id="clickShow">显示窗口</a>
<a href="###" class="ax-btn ax-primary" id="clickHide">隐藏窗口</a>
-
let stepInstance = new axPopup('#btnPos',{content:'伟大的中国',pageClose:false, });
let clickShow = document.querySelector('#clickShow');
let clickHide = document.querySelector('#clickHide');
clickShow.onclick = function(){
stepInstance.show();
}
clickHide.onclick = function(){
stepInstance.hide();
}
窗口叠窗口
本插件可自动检测窗口中是否包含子窗口,子窗口弹出后将在父窗口的z-index
值基础上自动+1,以确保永远浮在最前面。支持无限叠加。注意需要给实例multiple属性添加为true。
多层窗口
通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。
打开
中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家。
打开
<a href="###" class="ax-btn ax-primary" axPopup data-content="#pop01">多层窗口</a>
<div style="display: none;" id="pop01">
<p>通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</p>
<p align="center"><a href="###" axPopup data-content="#pop02">打开</a></p>
</div>
<div style="display: none;" id="pop02">
<p>中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家。</p>
<p align="center"><a href="###" axPopup data-content="伟大的中国">打开</a></p>
</div>
触发事件
默认对按钮click点击打开和关闭窗口,可选择使用hover打开和关闭窗口,对应的参数是trigger
。因为使用了内置的axHover
方法,当使用hover方式打开窗口时,迅速移动鼠标到窗口中,可保持窗口显示状态。
<a href="###" class="ax-btn ax-primary" axPopup data-content="伟大的中国">点击打开</a>
<a href="###" class="ax-btn ax-primary" axPopup data-content="伟大的中国" data-trigger="hover">移入打开</a>
窗口外关闭
pageClose
参数是指是否允许在窗口外点击页面关闭窗口,默认是允许,即true;可设置为禁止false。
<a href="###" class="ax-btn ax-primary" axPopup data-content="伟大的中国">允许</a>
<a href="###" class="ax-btn ax-primary" axPopup data-content="伟大的中国" data-pageClose="false">不允许</a>
B按钮打开A的窗口
通过设置rel
参数可让其他按钮点击打开某按钮绑定的popup窗口,rel可以是id或对节点对象。
参数rel
也可以是个数组。注意:如果将id数组写入data-*属性中,id前后需要英文双引号。
<a href="###" class="ax-btn ax-primary" axPopup data-content="伟大的中国" data-rel="#btnA">窗口按钮</a>
<a href="###" class="ax-btn ax-primary" id="btnA">按钮A</a>
<a href="###" class="ax-btn ax-primary" axPopup data-content="伟大的中国" data-rel='["#btnB","#btnC"]'>窗口按钮</a>
<a href="###" class="ax-btn ax-primary" id="btnB">按钮B</a>
<a href="###" class="ax-btn ax-primary" id="btnC">按钮C</a>
异步内容
异步内容是指窗口内容通过ajax形式从同域的其他页面获取的内容,使用异步内容的方式有三种:
- 1.使用data-type:'async'和data-url:''属性。填入页面地址即可获取该页面的html内容,比如:data-url="ajax/about.html"表示从about.html页面中获取所有html内容。
- 2.使用data-type:'async'和data-url:''属性。使用格式
url#id
,比如:data-url="ajax/about.html#china"表示从about.html页面中id=china的标签中读取内容。
- 3.使用js参数。必填type,url和content参数,其中content可用回调函数重新组织内容。回调函数有一个参数“data”,是异步内容。
-
<a href="###" class="ax-btn ax-primary" axPopup data-type="async" data-url="ajax/article.html">简单异步内容</a>
<a href="###" class="ax-btn ax-primary" axPopup data-type="async" data-url="ajax/article.html#post02">从ID获取异步内容</a>
<a href="###" class="ax-btn ax-primary" id="ajax">JS异步获取JSON</a>
-
new axPopup('#ajax',{
url:'ajax/axui.json',
content:function(data){
let html = '
';
for(let k in data){html+='- '+k+':'+data[k]+'
';}
html+='
';
return html;
}
});
自定义关闭按钮
在窗口内容中给元素添加close
属性即可作为关闭本窗口的按钮。
<a href="###" class="ax-btn ax-primary" axPopup data-content="#close">自定义关闭</a>
<div id="close" style="display: none;">中华人民共和国中央人民政府,今天成立啦!<br /><a href="###" close class="ax-btn ax-primary">关闭</a></div>
同时多个窗口
multiple
参数是表示页面是否允许显示多个窗口,默认为false即显示一个;可设置为true,让页面能同时显示多个窗口。
<a href="###" class="ax-btn ax-primary" axPopup data-content="伟大的中国" data-multiple="false">不允许</a>
<a href="###" class="ax-btn ax-primary" axPopup data-content="伟大的中国" data-multiple="true">允许</a>
<a href="###" class="ax-btn ax-primary" axPopup data-content="伟大的中国" data-multiple="true">也允许</a>
iframe远程页面
使用type:"iframe"
属性和url
参数表示使用iframe,默认高度为400px。由于iframe特性,需要设置size属性为较大尺寸,比如xl或xxl;同时可按需设置height和width参数,由于内容高度超过600px会自动滚动,所以height的极限高度为600px。
<a href="###" class="ax-btn ax-primary" axPopup data-type="iframe" data-url="http://www.axui.cn" data-size="xxl" data-title="打开iframe页面">iframe页面</a>
超出滚动
css中设定内容区域的max-width是60rem(等同于600px),max-height是500px,高度超出500px将自动滚动。用户通过使用maxWidth
和maxWidth
参数,可使更多内容滚动。
<script type="text/javascript">
$('#pop15').axPopup({title:'超出滚动',placement:'top',maxWidth:800,maxHeight:200,closeable:true,content:'文字'});
</script>
尺寸
小窗默认宽度是400rem(等同于400px),可通过size
参数设置不同宽度的小窗。
- sm:小型窗口,宽度200rem(200px)
- md:中型窗口,宽度360rem(360px),默认尺寸
- lg:大型窗口,宽度600rem(600px)
- xl:大型窗口,宽度800rem(800px)
- xxl:大型窗口,宽度1000rem(1000px)
中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。
<a href="###" class="ax-btn ax-primary" axPopup data-size="sm" data-content="#china">小型尺寸</a>
<a href="###" class="ax-btn ax-primary" axPopup data-size="md" data-content="#china">中型尺寸(默认)</a>
<a href="###" class="ax-btn ax-primary" axPopup data-size="lg" data-content="#china">大型尺寸</a>
<div style="display: none;" id="china">中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。</div>
任意组合内容
可对content
参数使用函数形式,content函数中的this指向实例本身,巧妙使用this.*可任意组合内容。
- this:指实例本身
- this.options:指实例参数,比如this.options.title指窗口标题
- this.button:指按钮Dom
- this.wrapper:指窗口Dom
- this.content:指窗口内容Dom
伟大的中国。
-
<a href="###" class="ax-btn ax-primary" id="btnSame01" name="唐太宗牛!">我要评论</a>
<a href="###" class="ax-btn ax-primary" id="btnSame02" name="宋高宗厉害!">继续评论</a>
<a href="###" class="ax-btn ax-primary" id="btnSame03" name="明成祖霸气外露!">追加评论</a>
-
let html = document.querySelector('#same').innerHTML;
new axPopup('#btnSame01',{
content:function(){
return html + this.button.getAttribute('name');
}
});
new axPopup('#btnSame02',{
content:function(){
return html + this.button.getAttribute('name');
}
});
new axPopup('#btnSame03',{
content:function(){
return html + this.button.getAttribute('name');
}
});
底部按钮
通过设定footerShow
参数显示窗口底部按钮。默认false不显示,可使用true显示默认按钮。用户可定义底部内容包括:1、自定义一个按钮;2、不要按钮,通过改写footer参数自定义文本。底部按钮参数如下:
confirm: {
text: '确定',//确认按钮文字
classname: '',//确认按钮的类名
icon: '',//确认按钮的图标,格式是
callback: ''//确认按钮的回调函数,最终按函数方式使用,格式是function(){}
},
cancel: {
text: '关闭',//取消按钮文字
classname: '',//取消按钮的类名
icon: '',//取消按钮的图标
callback: ''//取消按钮的回调函数
},
diy: {
text: '',//自定义按钮文字
classname: '',//自定义按钮的类名
icon: '',//自定义按钮的图标
url: '',//自定义按钮的超链接
target: '',//自定义按钮的链接目标,一般是_blank或者_self
callback: ''//自定义按钮的回调函数
}
<a href="###" class="ax-btn ax-primary" axPopup data-content="伟大的中国" data-footerShow="true">带常规按钮的小窗</a>
<a href="###" class="ax-btn ax-primary" axPopup data-content="伟大的中国" data-footerShow="true" data-not="自定义底部文本">自定义底部文本的小窗</a>
<a href="###" class="ax-btn ax-primary" axPopup data-content="伟大的中国" data-footerShow="true" data-diy-text="自定义按钮" data-diy-url="http://www.axui.cn" data-target="_blank">带自定义按钮的小窗</a>
显示列表
使用padding
和close
参数制作列表小窗。列表使用方法请见:list。
<a href="###" class="ax-btn ax-primary" axPopup data-content="#list" data-padding="false" data-close="false">查看列表</a>
<div id="list" style="display: none">
<a href="###" class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">南航与英航签署联营合作协议代码共享</span></div>
<span class="ax-arrow">26次</span>
</div>
</a>
<div class="ax-break-line"></div>
<a href="###" class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><span class="ax-ell">12月,到英国大城小镇看“亮灯”</span></div>
<span class="ax-arrow">45次</span>
</div>
</a>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><a href="###" class="ax-ell">英国人喝茶不再流行贵族范</a></div>
<span class="ax-arrow">234次</span>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-info-block">
<div class="ax-row">
<div class="ax-col"><a href="###" class="ax-ell">西班牙斗牛与逗牛,精彩各不同</a></div>
<span class="ax-arrow">98次</span>
</div>
</div>
</div>
提交表单
使用padding
和close
参数制作表单小窗。表单使用方法请见:input。
本插件中确认按钮是放置在form标签之外,集成了两种提交方法。
第一种是同步提交。如果使用popup装入表单,像普通表单那样页面跳转式提交表单,需要具备如下几个条件:
- 1、当页隐藏表单内容,并且必须使用
form
元素包裹,通过content
参数引用其ID
- 2、type参数设置为
form
- 3、confirm的
type
参数设置为submit
- 3、form元素必须设置
action
属性和method
属性
点击确认按钮将首先执行axValidRepeat
函数(函数用法),对表单内控件进行再次校验;如果全部通过将执行submit()
事件以跳转的方式提交表单。
<a href="###" class="ax-btn ax-primary" axPopup data-content="#form01" data-type="form" data-confirm-type="submit" data-padding="false" data-close="false">前端校验提交表单</a>
<a href="###" class="ax-btn ax-primary" axPopup data-content="#form02" data-type="form" data-confirm-type="submit" data-padding="false" data-close="false">异步校验提交表单</a>
<!--窗口-表单1-->
<div id="form01" style="display: none">
<form action="https://www.axui.cn" method="post">
<div class="ax-emulate">
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名:</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="name01" placeholder="输入登录名称" type="text" axValid data-type="required"></div>
</div>
<span class="ax-form-txt ax-color-des">必填校验</span>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">选择房子:</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><input name="name02" placeholder="几室" value="" type="text"><span class="ax-pos-right">室</span></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input name="name03" placeholder="几厅" value="" type="text"><span class="ax-pos-right">厅</span></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input name="name04" placeholder="几卫" value="" type="text"><span class="ax-pos-right">卫</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">验证码:</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="name05" placeholder="输入验证码" value="" type="text"></div>
</div>
<a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a>
</div>
</div>
</div>
</form>
</div>
<!--窗口-表单2-->
<div id="form02" style="display: none">
<form action="https://www.axui.cn" method="post">
<div class="ax-emulate">
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名:</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="name01" placeholder="输入登录名称" type="text" axValid data-url="ajax/name.php"></div>
</div>
<span class="ax-form-txt ax-color-des">填“李雷”</span>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">选择房子:</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><input name="name02" placeholder="几室" value="" type="text"><span class="ax-pos-right">室</span></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input name="name03" placeholder="几厅" value="" type="text"><span class="ax-pos-right">厅</span></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input name="name04" placeholder="几卫" value="" type="text"><span class="ax-pos-right">卫</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">验证码:</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="name05" placeholder="输入验证码" value="" type="text"></div>
</div>
<a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a>
</div>
</div>
</div>
</form>
</div>
第二种是异步提交。异步提交表单不需要跳转页面即可完成表单提交,是目前前端开发中比较常见的表单提交方式。异步提交表单需要具备如下几个条件:
- 1、当页隐藏表单内容,并且必须使用
form
元素包裹,通过content
参数引用其ID
- 2、type参数设置为
form
- 3、confirm的
type
参数设置为asyn
- 3、confirm的
url
参数设置为异步提交地址
点击确认按钮将首先执行axValidRepeat
函数(函数用法),对表单内控件进行再次校验;如果全部通过将执行axAjaxSubmit
函数(函数用法)以非跳转的方式提交表单。
<a href="###" class="ax-btn ax-primary" axPopup data-content="#form03" data-type="form" data-confirm-type="asyn" data-confirm-url="ajax/login.php" data-padding="false" data-close="false">异步提交表单</a>
<!--窗口-表单3-->
<div id="form03" style="display: none">
<form>
<div class="ax-emulate">
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名:</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="name01" placeholder="输入登录名称" type="text" axValid data-type="required"></div>
</div>
<span class="ax-form-txt ax-color-des">必填校验</span>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">选择房子:</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><input name="name02" placeholder="几室" value="" type="text"><span class="ax-pos-right">室</span></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input name="name03" placeholder="几厅" value="" type="text"><span class="ax-pos-right">厅</span></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><input name="name04" placeholder="几卫" value="" type="text"><span class="ax-pos-right">卫</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-line"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">验证码:</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="name05" placeholder="输入验证码" value="" type="text"></div>
</div>
<a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a>
</div>
</div>
</div>
</form>
</div>
多媒体弹窗
本插件不仅可以弹出纯文本,也可以弹出图片、视频、音频等多媒体文件。多媒体文件分别用各自的属性表示。
- 使用data-type:'picture'和data-url属性表示显示一张图片,请填入一个图片地址。
- 使用data-type:'video'和data-url属性表示显示一个视频,请填入一个视频地址。
- 使用data-type:'audio'和data-url属性表示显示一个音频,请填入一个音频地址。
- 使用data-type:'iframe'和data-url属性表示显示一个网址,请填入一个网址;使用iframe属性,请配合使用width、height和size属性。
- data-name:媒体文件的名称。
等级 |
说明 |
A、微小 |
为其他部门的工作提供服务。 |
B、略有 |
对实现企业的发展战略提供支持性服务。 |
C、中等 |
对实现企业的发展战略起到重要作用。 |
D、巨大 |
制定企业的发展战略,位于企业的决策层。 |
<a href="###" class="ax-btn ax-primary" axPopup data-type="picture" data-url="https://src.axui.cn/v2.0/public/images/china01.jpg" data-mediaName="中国城市夜景" data-close="false" data-content="中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家。">图片</a>
<a href="###" class="ax-btn ax-primary" axPopup data-type="video" data-url="https://src.axui.cn/v2.0/public/media/video.mp4" data-mediaName="中国城市夜景" data-close="false" data-content="中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家。">视频播放</a>
<a href="###" class="ax-btn ax-primary" axPopup data-type="audio" data-url="https://src.axui.cn/v2.0/public/media/audio.mp3" data-mediaName="中国城市夜景" data-close="false" data-content="中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家。">音频播放</a>
<a href="###" class="ax-btn ax-primary" axPopup data-type="iframe" data-url="http://www.axui.cn" data-width="800px" data-height="400px" data-padding="false">iframe</a>
<a href="###" class="ax-btn ax-primary" axPopup data-content="#table" data-size="lg" data-close="false">表格</a>
<div style="display: none;" id="table">
<table class="ax-table">
<thead>
<tr>
<th>等级</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>A、微小</td>
<td>为其他部门的工作提供服务。</td>
</tr>
<tr>
<td>B、略有</td>
<td>对实现企业的发展战略提供支持性服务。</td>
</tr>
<tr>
<td>C、中等</td>
<td>对实现企业的发展战略起到重要作用。</td>
</tr>
<tr>
<td>D、巨大</td>
<td>制定企业的发展战略,位于企业的决策层。</td>
</tr>
</tbody>
</table>
</div>
销毁实例
通过使用destroy
方法更新销毁实例,有回调函数但无参数。
-
<a href="###" class="ax-btn ax-primary" id="popDestroy">将要销毁的</a>
<a href="###" class="ax-btn ax-primary" id="btnDestroy">立即销毁</a>
-
let popDestroy = new axPopup('#popDestroy', { content: '伟大的中国' });
let btnDestroy = document.querySelector('#btnDestroy');
btnDestroy.onclick = function () {
popDestroy.destroy(function(){
alert('销毁了实例!')
});
}
更新参数
通过使用update
方法更新插件参数。该方法有两个参数,第一个参数setting:将要更新的参数,格式:{name:value};第二个参数callback:回调函数,可不填,回调函数支持三个参数:
- 第1个参数:是否更新了,true或false,可不填
- 第2个参数:更新之前的内容,可不填
- 第3个参数:更新之后的内容,可不填
-
<a href="###" class="ax-btn ax-primary" id="btnContent">装入内容</a>
<a href="###" class="ax-btn ax-primary" id="btnUpdate">更新内容</a>
-
let contentInstance = new axPopup('#btnContent', { content: '伟大的中国' });
let btnUpdate = document.querySelector('#btnUpdate');
btnUpdate.onclick = function () {
contentInstance.updateContent('中华人民共和国中央人民政府,今天成立啦!',function(update,before,after){
if(update){
alert('已经更新!\n原内容:'+before+'\n新内容:'+after);
}else{
alert('没有要更新的内容!');
}
});
}
更新内容
使用updateContent方法可更新窗口内容。updateContent的第一个值可以是“#id”,也可以是html字符串;第二个值是回调函数,可不填;其中回调函数有3个参数:
- 第1个参数:是否更新了,true或false,可不填
- 第2个参数:更新之前的内容,可不填
- 第3个参数:更新之后的内容,可不填
以下演示,第一次点击“装入内容”按钮将创建一个实例并打开;关闭之后再点击“更新内容”按钮将改变之前窗口的内容;再次点击“装入内容”按钮发现内容已经改变了。
-
<a href="###" class="ax-btn ax-primary" id="btnContent">装入内容</a>
<a href="###" class="ax-btn ax-primary" id="btnUpdate">更新内容</a>
-
let contentInstance = new axPopup('#btnContent', { content: '伟大的中国' });
let btnUpdate = document.querySelector('#btnUpdate');
btnUpdate.onclick = function () {
contentInstance.updateContent('中华人民共和国中央人民政府,今天成立啦!',function(update,before,after){
if(update){
alert('已经更新!\n原内容:'+before+'\n新内容:'+after);
}else{
alert('没有要更新的内容!');
}
});
}
监听事件
借鉴jQuery的写法,本插件有若干监听方法,基本写法是:instance.on('show',function(){});具体事件说明如下:
show
打开窗口前执行
shown
打开窗口后执行
hide
窗口隐藏前执行
hidden
窗口隐藏后执行
update
内容或参数开始更新后执行
updated
内容或参数更新后执行
演示实例使用console方法,请用F12打开开发者工具中的“控制台”查看监听效果:
-
<a href="###" class="ax-btn ax-primary" id="ready">打开实例进行监听</a>
-
let ready = new axPopup('#ready',{
content: '中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。',
});
ready.on('show', function () {
console.log('开始打开执行')
}).on('shown', function () {
console.log('已经打开执行')
}).on('hide', function () {
console.log('关闭前执行')
}).on('hidden', function () {
console.log('关闭后执行')
});
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axPopup({
title: '',//窗口标题,为空等于不显示
titleBreak: false,//标题分割线,默认不显示
placement: 'top',//窗口相对按钮的位置,可填top|top-start|top-end|bottom|bottom-start|bottom-end|left|left-start|left-end|right|right-start|right-end|center
arrow: true,//是否显示指示箭头,默认true显示,可填false不显示
trigger: 'click',//显示窗口的动作,默认click点击显示,可填hover,
pageClose: true,//点击窗口之外的区域是否允许关闭窗口,默认true允许,可填false
size: '',//小窗尺寸,默认为空不设置尺寸,可填sm|md|lg|xl|xxl
duration: '',//弹出和关闭窗口动画的时间,如果为空则使用css中定义的动画时间,单位ms
in: 'fadeIn',//可填fadeIn,fadeInDown,fadeInUp,slideDown,fadeInLeft,fadeInRight,springIn,scaleIn等
out: 'fadeOut',//可填fadeOut,fadeOutDown,fadeOutUp,slideUp,fadeOutLeft,fadeOutRight,springOut,scaleOut等
multiple: false,//是否允许打开多个窗口,默认不允许
offsetShow: true,//是否保持弹窗与元素的间隙,默认保持,可选false取消间隙
rel: '',//可以触发本窗口的元素,可以是#id,节点对象,或数组(多个按钮均触发)
theme: '',//窗口的风格,默认为空,可选crude
stay: false,//设置打开后是否就不再关闭,默认为false,可选true
fixDistance:24,//如果窗口宽度或高度小于按钮,placement为*-start或*-end时箭头所处的位置,单位是px,默认值与popper.js插件一致
name: '',//多媒体文件名称
size: 'md',//窗口尺寸,默认正常尺寸,可填sm,middle,large,full
width: '',//内容宽度,当type是iframe的时候,有必要设置该参数,比如800px
height: '',//内容高度,当type是iframe的时候,有必要设置该参数,比如400px,但是不要超过600px否则会产生垂直滚动条
padding: 'ax-padding',//窗口内边距,值可以是布尔值也可以是类名,默认带边距,可填false,true,ax-padding,ax-padding ax-xxl,...
content: '',//窗口内容,可填#id或html,
type: 'html',//内容的类型,默认是html,可填picture|video|audio|iframe|async|html
url: '',//异步请求地址,可填“url”或者“url#id”
close: true,//关闭窗口的按钮,默认显示
footerShow: true,//是否显示底部,默认显示
footerType: 'line',//底部按钮风格,可选center,line,right
footerBreak: false,//底部分割线,默认不显示
note: '',//其他内容
confirm: {
text: '确定',//确认按钮文字
classname: '',//确认按钮的类名
icon: '',//确认按钮的图标,格式是
type:'close',//按钮类型,可选择close关闭、async异步提交表单、submit直接提交表单
url: '',//提交的地址,如果type为async则必须使用该参数
callback: ''//确认按钮的回调函数,最终按函数方式使用,格式是function(){}
},
cancel: {
text: '关闭',//取消按钮文字
classname: '',//取消按钮的类名
icon: '',//取消按钮的图标
callback: ''//取消按钮的回调函数
},
diy: {
text: '',//自定义按钮文字
classname: '',//自定义按钮的类名
icon: '',//自定义按钮的图标
url: '',//自定义按钮的超链接
target: '',//自定义按钮的链接目标,一般是_blank或者_self
callback: ''//自定义按钮的回调函数
}
});
});
1、如果同时设置了index和cookie,那么会自动取消cookie设定。
2、本插件支持data-*属性方式使用参数。如果在插件元素上通过data-*属性方式使用参数,参数层级使用短横区分,比如要设置student:{name:'',school:''}中的name参数,那么在插件元素的data属性中应该这样书写:data-student-name="Lily"。
操作方法
名称 |
说明 |
参数说明 |
回调函数 |
init() |
初始化 |
无参数 |
无回调函数 |
update(setting, callback) |
更新所有参数 |
setting是用户自定义参数,是一个对象;callback是回调函数,可不填 |
function(update,before,after){}
update是指判断是否更新,true或false,可不填;before是指更新之前的参数,可不填;after是指更新之后的参数,可不填。 |
updateContent(html, callback) |
更新窗口内容 |
html是用户自定义内容,可以是字符串也可以是DOM的ID(#ID);callback是回调函数,可不填 |
function(update,before,after,origin){}
update是指判断是否更新,true或false,可不填;before是指更新之前的内容,可不填;after是指更新之后的内容,可不填;origin是指原始内容,可不填。 |
destroy(callback) |
销毁实例 |
callback是回调函数,可不填 |
function(){} 无参数 |
show(callback) |
打开实例窗口 |
callback是回调函数,可不填 |
function(){} 无参数 |
hide(callback) |
关闭实例窗口 |
callback是回调函数,可不填 |
function(){} 无参数 |
on(type, handler) |
监听实例 |
type是监听事件,具体可看前文的:监听方法;handler是回调函数 |
function(){} 无参数 |
axInstance(axPopups, name) |
获取实例并重新设定参数 |
axPopups是当页创建的所有实例;name是指插件元素axPopup属性的name值 |
无回调函数 |
在回调函数中this均指向实例本身,所以在回调函数中可默认使用如下变量:
- this:实例本身
- this.targetDom:实例的Dom
- this.options:实例的参数