与dialog不同的是，popup插件讲究轻便、简单、有效，对于短小内容提示使用popup是非常适合的。本插件基于自身的定位引擎，可自适应于多种页面形态：
插件运行方式有两种：
axPopup属性，配合使用content参数即可按默认参数运行插件。new axPopup('#ID',{content:''})方式创建实例运行。
<a href="###" class="ax-btn ax-primary" axPopup="content:'伟大的中国'">点击打开小窗</a>
<a href="###" class="ax-btn ax-primary" id="btnDft">JS打开小窗</a>
通过trigger参数设置窗口的显示方式：
<a href="###" class="ax-btn ax-primary" axPopup="content:'伟大的中国',trigger:'hover'">经过打开小窗</a>
<a href="###" class="ax-btn ax-primary" axPopup="content:'伟大的中国',trigger:'click'">点击打开小窗</a>
<a href="###" class="ax-btn ax-primary" axPopup="content:'伟大的中国',trigger:'sticky'">初始化就打开了</a>
<a href="###" class="ax-btn ax-primary" axPopup="content:'伟大的中国',trigger:'none'">使用节点选择工具查看</a>
通过设定placement参数，使窗口放置在按钮周围各个角度，可选用的值有如下：
用户根据需要使用in和out参数设定打开和关闭动画样式。动画的时间默认是100ms，用户可使用duration参数设置合适的时间，单位ms。
<div style="display: none;" id="china">中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</div>
<a href="###" class="ax-btn ax-primary" axPopup="content:'#china',in:'fadeIn',out:'fadeOut'">渐显渐隐（默认）</a>
<a href="###" class="ax-btn ax-primary" axPopup="content:'#china',in:'fadeInUp',out:'fadeOutDown',duration:300">向上渐显向下渐隐</a>
<a href="###" class="ax-btn ax-primary" axPopup="content:'#china',in:'fadeInDown',out:'fadeOutUp',duration:300">向下渐显向上渐隐</a>
<a href="###" class="ax-btn ax-primary" axPopup="content:'#china',in:'slideDown',out:'slideUp',duration:300">逐步显示逐步隐藏</a>
<div class="ax-break"></div>
<a href="###" class="ax-btn ax-primary" axPopup="content:'#china',in:'fadeInLeft',out:'fadeOutRight',duration:300">向左渐显向右渐隐</a>
<a href="###" class="ax-btn ax-primary" axPopup="content:'#china',in:'fadeInRight',out:'fadeOutLeft',duration:300">向右渐显向左渐隐</a>
<a href="###" class="ax-btn ax-primary" axPopup="content:'#china',in:'scaleIn',out:'scaleOut',duration:300">放大打开缩小关闭</a>
<a href="###" class="ax-btn ax-primary" axPopup="content:'#china',in:'springIn',out:'springOut',duration:300">弹出弹回</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="content:'#pop01',multiple:true">多层窗口</a>
<div style="display: none;" id="pop01">
<p>通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
<p align="center"><a href="###" axPopup="content:'#pop02',multiple:true">打开</a></p>
</div>
<div style="display: none;" id="pop02">
<p>中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家。</p>
<p align="center"><a href="###" axPopup="content:'伟大的中国',multiple:true">打开</a></p>
</div>
默认对按钮click点击打开和关闭窗口，可选择使用hover打开和关闭窗口，对应的参数是trigger。因为使用了内置的axHover方法，当使用hover方式打开窗口时，迅速移动鼠标到窗口中，可保持窗口显示状态。
<a href="###" class="ax-btn ax-primary" axPopup="content:'伟大的中国'">点击打开</a>
<a href="###" class="ax-btn ax-primary" axPopup="content:'伟大的中国',trigger:'hover'">移入打开</a>
pageClose参数是指是否允许在窗口外点击页面关闭窗口，默认是允许，即true；可设置为禁止false。
<a href="###" class="ax-btn ax-primary" axPopup="content:'伟大的中国'">允许</a>
<a href="###" class="ax-btn ax-primary" axPopup="content:'伟大的中国',pageClose:false">不允许</a>
通过设置rel参数可让其他按钮点击打开某按钮绑定的popup窗口，rel可以是id或对节点对象。
参数rel也可以是个数组。注意：如果将id数组写入rel属性中，id前后需要英文双引号。
<a href="###" class="ax-btn ax-primary" axPopup="content:'伟大的中国',rel:'#btnA'">窗口按钮</a>
<a href="###" class="ax-btn ax-primary" id="btnA">按钮A</a>
<a href="###" class="ax-btn ax-primary" axPopup="content:'伟大的中国',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>
url#id，比如：url:"ajax/about.html#china"表示从about.html页面中id=china的标签中读取内容。
<a href="###" class="ax-btn ax-primary" axPopup='type:"async",url:"ajax/article.html"'>简单异步内容</a>
<a href="###" class="ax-btn ax-primary" axPopup='type:"async",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 = '在窗口内容中给元素添加close属性即可作为关闭本窗口的按钮。
<a href="###" class="ax-btn ax-primary" axPopup='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='content:"伟大的中国",multiple:false'>不允许</a>
<a href="###" class="ax-btn ax-primary" axPopup='content:"伟大的中国",multiple:true'>允许</a>
<a href="###" class="ax-btn ax-primary" axPopup='content:"伟大的中国",multiple:true'>也允许</a>
使用type:"iframe"属性和url参数表示使用iframe，默认高度为400px。由于iframe特性，需要设置size属性为较大尺寸，比如xl或xxl；同时可按需设置height和width参数，由于内容高度超过600px会自动滚动，所以height的极限高度为600px。
<a href="###" class="ax-btn ax-primary" axPopup='type:"iframe",url:"http://www.axui.cn",size:"xxl",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参数设置不同宽度的小窗。
<a href="###" class="ax-btn ax-primary" axPopup='size:"sm",content:"#china"'>小型尺寸</a>
<a href="###" class="ax-btn ax-primary" axPopup='size:"md",content:"#china"'>中型尺寸（默认）</a>
<a href="###" class="ax-btn ax-primary" axPopup='size:"lg",content:"#china"'>大型尺寸</a>
<div style="display: none;" id="china">中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</div>
可对content参数使用函数形式，content函数中的this指向实例本身，巧妙使用this.*可任意组合内容。
<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: '',//确认按钮的图标，格式是
type: 'close',//按钮类型，可选择close关闭、async异步提交表单、submit直接提交表单
url: '',//提交的地址，如果type为async则必须使用该参数
callback: ''//确认按钮的回调函数，最终按函数方式使用，格式是function(button,content){}，button是按钮节点，content是返回内容
},
cancel: {
text: '关闭',//取消按钮文字
classname: '',//取消按钮的类名
icon: '',//取消按钮的图标
callback: ''//取消按钮的回调函数，格式是function(button,content){}，button是按钮节点，content是返回内容
},
diy: {
text: '',//自定义按钮文字
classname: '',//自定义按钮的类名
icon: '',//自定义按钮的图标
url: '',//自定义按钮的超链接
target: '',//自定义按钮的链接目标，一般是_blank或者_self
callback: ''//自定义按钮的回调函数，格式是function(button,content){}，button是按钮节点，content是返回内容
}
<a href="###" class="ax-btn ax-primary" axPopup='content:"伟大的中国",footerShow:true'>带常规按钮的小窗</a>
<a href="###" class="ax-btn ax-primary" axPopup='content:"伟大的中国",footerShow:true,note:"自定义底部文本"'>自定义底部文本的小窗</a>
<a href="###" class="ax-btn ax-primary" axPopup='content:"伟大的中国",footerShow:true,diy:{text:"自定义按钮",url:"http://www.axui.cn",target:"_blank"}'>带自定义按钮的小窗</a>
使用padding和close参数制作列表小窗。列表使用方法请见：list。
<a href="###" class="ax-btn ax-primary" axPopup='content:"#list",padding:false,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装入表单，像普通表单那样页面跳转式提交表单，需要具备如下几个条件：
form元素包裹，通过content参数引用其IDformtype参数设置为submitaction属性和method属性点击确认按钮将首先执行axValidRepeat函数（函数用法），对表单内控件进行再次校验；如果全部通过将执行submit()事件以跳转的方式提交表单。
<a href="###" class="ax-btn ax-primary" axPopup='content:"#form01",type:"form",padding:false,close:false,confirm:{type:"submit"}'>前端校验提交表单</a>
<a href="###" class="ax-btn ax-primary" axPopup='content:"#form02",type:"form",padding:false,close:false,confirm:{type:"submit"}'>异步校验提交表单</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='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='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>
第二种是异步提交。异步提交表单不需要跳转页面即可完成表单提交，是目前前端开发中比较常见的表单提交方式。异步提交表单需要具备如下几个条件：
form元素包裹，通过content参数引用其IDformtype参数设置为asyncurl参数设置为异步提交地址点击确认按钮将首先执行axValidRepeat函数（函数用法），对表单内控件进行再次校验；如果全部通过将执行axAjaxSubmit函数（函数用法）以非跳转的方式提交表单。
<a href="###" class="ax-btn ax-primary" axPopup='content:"#form03",type:"form",padding:false,close:false,confirm:{type:"async",url:"ajax/login.php"}'>异步提交表单</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='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>
本插件不仅可以弹出纯文本，也可以弹出图片、视频、音频等多媒体文件。多媒体文件分别用各自的属性表示。
<a href="###" class="ax-btn ax-primary" axPopup='type:"picture",url:"https://src.axui.cn/v2.0/public/images/china01.jpg",mediaName:"中国城市夜景",close:false,content:"中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家。"'>图片</a>
<a href="###" class="ax-btn ax-primary" axPopup='type:"video",url:"https://src.axui.cn/v2.0/public/media/video.mp4",mediaName:"中国城市夜景",close:false,content:"中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家。"'>视频播放</a>
<a href="###" class="ax-btn ax-primary" axPopup='type:"audio",url:"https://src.axui.cn/v2.0/public/media/audio.mp3",mediaName:"中国城市夜景",close:false,content:"中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家。"'>音频播放</a>
<a href="###" class="ax-btn ax-primary" axPopup='type:"iframe",url:"http://www.axui.cn",mediaName:"中国城市夜景",padding:false,width:"800px",height:"400px"'>iframe</a>
<a href="###" class="ax-btn ax-primary" axPopup='content:"#table",size:"lg",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>
通过使用this.destroy(callback)方法销毁实例，支持回调函数，回调无参数；销毁后可通过init初始化重新启用。
<a href="###" class="ax-btn ax-primary" id="insDestroy">将要销毁的</a>
<a href="###" class="ax-btn ax-primary" id="btnDestroy">立即销毁</a>
<a href="###" class="ax-btn ax-primary" id="btnReturn">再次启用</a>
let insDestroy = new axPopup('#insDestroy', { content: '伟大的中国' }),
btnDestroy = document.querySelector('#btnDestroy'),
btnReturn = document.querySelector('#btnReturn');
btnDestroy.onclick = function () {
insDestroy.destroy(function () {
alert('销毁了实例！')
});
}
btnReturn.onclick = function () {
insDestroy.init();
}
在创建实例的时候会自动添加到全局实例合集当中；如果填写了实例名insName，那么可通过axInstance方法进行销毁实例。关于axInstance使用方法请点击这里。
<a href="###" class="ax-btn ax-primary" axPopup='insName:"big",content:"big实例"'>name='big'的实例</a>
<a href="###" class="ax-btn ax-primary" axPopup='insName:"small",content:"small实例"'>name='small'的实例</a>
<a href="###" class="ax-btn ax-primary" id="destroyBig">销毁big实例</a>
<a href="###" class="ax-btn ax-primary" id="destroySmall">销毁small实例</a>
<a href="###" class="ax-btn ax-primary" id="viewAll">查看实例合集</a>
<a href="###" class="ax-btn ax-primary" id="returnAll">重新启用</a>
let destroyBig = document.querySelector('#destroyBig'),
destroySmall = document.querySelector('#destroySmall'),
viewAll = document.querySelector('#viewAll'),
returnAll = document.querySelector('#returnAll');
destroyBig.onclick = function () {
axInstance.destroy('big');
}
destroySmall.onclick = function () {
axInstance.destroy('small');
}
viewAll.onclick = function () {
//只查看有name的实例合集
console.log(axInstance.data.filter(i => i.name && i.type === 'popup'));
}
returnAll.onclick = function () {
//重新初始化以启用
let items = axInstance.data.filter(i => (i.name === 'big' || i.name === 'small') && i.type === 'popup');
items.forEach(i => {
i.instance.init();
});
}
如果在创建实例的时候填写了insName参数，那么使用axInstance的find方法可找到指定名称的实例，并可对实例进行初始化、修改、销毁等操作。
<a href="###" class="ax-btn ax-primary" axPopup='insName:"ins01",content:"我是中国人"'>创建带name的实例</a>
<a href="###" class="ax-btn ax-primary" id="nameContent">更新内容</a>
<a href="###" class="ax-btn ax-primary" id="nameSet">修改参数</a>
<a href="###" class="ax-btn ax-primary" id="nameDestroy">销毁</a>
<a href="###" class="ax-btn ax-primary" id="nameReturn">重新启用</a>
let nameIns = axInstance.find('ins01'),
nameOpen = document.querySelector('#nameOpen'),
nameContent = document.querySelector('#nameContent'),
nameSet = document.querySelector('#nameSet'),
nameDestroy = document.querySelector('#nameDestroy'),
nameReturn = document.querySelector('#nameReturn');
nameOpen.onclick = function () {
nameIns.show();
}
nameContent.onclick = function () {
nameIns.updateContent('元谋人是已知的中国境内最早的人类。北京人是原始人群时期的典型。山顶洞人已经过着氏族公社的生活。').show();
}
nameDestroy.onclick = function () {
nameIns.destroy();
}
nameSet.onclick = function () {
nameIns.update({
title: '标题修改了！'
}, function (update, before, after) {
if (update) {
alert('更新了参数！');
} else {
alert('没有更新参数！');
}
}).show();
}
nameReturn.onclick = function () {
nameIns.init();
}
通过使用update方法更新插件参数。该方法有两个参数，第一个参数setting：将要更新的参数，格式：{name:value}；第二个参数callback：回调函数，可不填，回调函数支持三个参数：
<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('没有要更新的内容！');
}
});
}
使用this.updateContent(data,callback)方法可更新窗口内容，支持三个参数。data可以是#id、.className等选择器，详细点击这里，也可是是DOM节点；第二个值是回调函数，可不填；其中回调函数有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('没有要更新的内容！');
}
});
}
有时候我们只需要打开一个popup窗口，但是需要用在不同的按钮上面，此时我们需要借助updatePosition的方法来修改定位，该方法支持两个参数：
<a href="###" class="ax-btn ax-primary" id="tranPos1">原pop</a>
<a href="###" class="ax-btn ax-primary" id="tranPos2">定位过来</a>
<a href="###" class="ax-btn ax-primary" id="tranPos3">再次定位</a>
let tranPos1 = document.querySelector('#tranPos1'),
tranPos2 = document.querySelector('#tranPos2'),
tranPos3 = document.querySelector('#tranPos3'),
tranIns = new axPopup(tranPos1, { content: '伟大的中国' });
tranPos1.onmouseenter = function () {
tranIns.updatePosition(this);
}
tranPos2.onmouseenter = function () {
tranIns.updatePosition(this);
}
tranPos3.onmouseenter = function () {
tranIns.updatePosition(this);
}
本插件有系列内部成员变量和内部操作方法，用户根据这些变量和方法可以自由操作实例，据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。
内部成员变量如下：
this.button：定位浮层的按钮节点this.form：浮层内的表单提交域节点this.shown：浮层显示状态，true或falsethis.destroyed：是否销毁状态，true或falsethis.bound：是否绑定事件状态，true或falsethis.targetDom：浮层节点this.wrapper：浮层内的.ax-popup-wrapper节点this.content：浮层内的.ax-popup-content节点this.body：浮层内的.ax-popup-body节点this.header：浮层内的.ax-popup-header节点this.footer：浮层内的.ax-popup-footer节点this.wrapperHeight：浮层内的.ax-popup-wrapper节点高度值，数字格式this.duration：显示和关闭动画的持续时间，数字格式，单位msthis.hover：hover实例（由axHover创建）this.popupPosition：定位实例（由axPopupPosition创建），通过该实例变量可以获取更深一级变量：内部操作方法如下：
this.update(setting, callback)：更新所有参数，支持两个参数：this.updateContent(html, callback)：更新文本内容，支持两个参数：this.updatePosition(btn, callback)：更新定位按钮（转移浮层到其他按钮上），支持两个参数：show(callback)：显示浮层，支持一个参数即callback回调，回调函数无参数。hide(callback)：隐藏浮层，支持一个参数即callback回调，回调函数无参数。destroy(callback)：销毁实例，支持回调函数，回调无参数：全局操作方法如下：
axInstance：每个new实例都会自动加入到全局实例合集当中，通过该方法可获取实例，继而使用实例的内部变量和内部操作方法。关于axInstance使用方法请点击这里。本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：
onInit 初始化后执行，无参数onShow/show 打开窗口前执行，无参数onShown/shown 打开窗口后执行，无参数onHide/hide 窗口隐藏前执行，无参数onHidden/hidden 窗口隐藏后执行，无参数onUpdate/update 内容、参数或位置更新前执行，无参数onUpdated/updated 参数更新后执行，支持参数isUpdated(是否更新了：true或false)、before（更新前参数）、after（更新后参数）onUpdateContent/updateContent 内容更新后执行，支持参数isUpdated(是否更新了：true或false)、before（更新前内容）、after（更新后内容）onUpdatePosition/updatePosition 位置更新后执行，支持参数placement(位置)onDestroy/destroy 销毁后执行，无参数演示实例显示结果使用了console.log方法，请按下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({
insName: '',//实例名称，对axInstance有用实例合集当中
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，sticky，none
pageClose: true,//点击窗口之外的区域是否允许关闭窗口，默认true允许，可填false
size: 'md',//小窗尺寸，默认为md，可填sm|md|lg|xl|xxl
duration: 0,//弹出和关闭窗口动画的时间，如果为0则使用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，节点对象，或数组（多个按钮均触发）
triggerRel: 'click',//关联按钮显示窗口的动作，默认click点击显示，可填hover，sticky，input，none，如果不填将使用trigger来代替
theme: '',//窗口的风格，默认为空，可选crude
stay: false,//设置打开后是否就不再关闭，默认为false，可选true
fixDistance: '2.4rem',//如果窗口宽度或高度小于按钮，placement为*-start或*-end时箭头所处的位置，字符串格式
name: '',//多媒体文件名称
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|form
url: '',//异步请求地址，可填“url”或者“url#id”
btnClass: 'ax-opened',//触发按钮在打开气泡后新增的样式名
close: true,//关闭窗口的按钮，默认显示
footerShow: true,//是否显示底部，默认显示
footerType: 'line',//底部按钮风格，可选center,line,right
footerBreak: false,//底部分割线，默认不显示
note: '',//其他内容
ajaxType: 'post',//异步提交的方式，默认post，可填get
preventScroll: true,//当内容过长过多的时，在下滑内容时避免页面主滚动条也滚动，默认为true，可选择false
onInit: '',//回调函数，初始化后执行，无参数
onShow: '',//回调函数，开始显示后执行，无参数
onShwon: '',//回调函数，完成显示后执行，无参数
onHide: '',//回调函数，开始关闭后执行，无参数
onHidden: '',//回调函数，完全关闭后执行，无参数
onUpdate: '',//回调函数，参数/内容/位置更新前执行，无参数
onUpdated: '',//回调函数，参数更新后执行，无参数
onUpdateContent: '',//回调函数，内容更新后执行，支持参数isUpdate(是否更新了：true或false)、oldContent（更新前内容）、newContent（更新后内容）
onUpdatePosition: '',//回调函数，位置更新后执行，支持参数placement(位置)
onDestroy: '',//回调函数，销毁后执行，无参数
confirm: {
text: '确定',//确认按钮文字
classname: '',//确认按钮的类名
icon: '',//确认按钮的图标，格式是<i class="ax-iconfont ax-icon-edit"></i>
type: 'close',//按钮类型，可选择close关闭、async异步提交表单、submit直接提交表单、prevent阻止按钮默认事件什么事也不做
url: '',//提交的地址，如果type为async则必须使用该参数
callback: ''//确认按钮的回调函数，最终按函数方式使用，格式是function(button,content){}，button是按钮节点，content是返回内容
},
cancel: {
text: '关闭',//取消按钮文字
classname: '',//取消按钮的类名
icon: '',//取消按钮的图标
callback: ''//取消按钮的回调函数，格式是function(button,content){}，button是按钮节点，content是返回内容
},
diy: {
text: '',//自定义按钮文字
classname: '',//自定义按钮的类名
icon: '',//自定义按钮的图标
url: '',//自定义按钮的超链接
target: '',//自定义按钮的链接目标，一般是_blank或者_self
callback: ''//自定义按钮的回调函数，格式是function(button,content){}，button是按钮节点，content是返回内容
}
});