Popup 弹窗
基本使用方法 PLUGIN
WebUI-Popover是非常优秀的弹窗插件，本框架在v1.2.18基础上进行了改造和深度整合，详见Github。以下是对该插件的修改项。
- 新增placement属性：center，使用该属性会在浏览器固定居中。
- 针对手机端做了适配，在手机端打开窗口均是placement:center。
- 新增maxWidth属性，显示窗口的最大宽度。
- 新增maxHeight属性，显示窗口内容部分的最大高度，超出滚动显示。
- 修改WebuiPopovers方法为axPopups。
本框架的Popup弹窗有两种使用方法，一种是将参数如title，content，width等信息直接写入按钮；第二种是将参数写入js里。请观摩以下两个基本例子，可快速上手使用。
<a href="#" class="ax-btn ax-primary" id="pop01" data-title="文字" data-content="文字" data-placement="right" data-max-width="400">文字
<a href="#" class="ax-btn ax-primary" id="pop02">文字
<script type="text/javascript">
$('#pop01').axPopup();
$('#pop02').axPopup({
title:'快速了解Popup',
content:'本UI前端框架的Popup很强大，参数多，可以适用于多种场景。',
placement:'bottom-right',
trigger:'hover',
width:300,
height:200,
closeable:true,
animation:'pop',
arrow:true,
multi:true,
});
</script>
参数说明
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 窗口的标题，如果为空窗口标题就不显示。 | string | 空 |
| content | 窗口的内容，如果为空窗口就没内容。 | string | 空 |
| placement | 窗口相对按钮的位置，选项有：auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left,left-top,right-top,left-bottom,right-bottom,center,auto-top,auto-bottom,auto-left,auto-right | string | auto |
| width | 窗口的宽度。 | number | auto |
| height | 窗口的高度。 | number | auto |
| maxWidth | 窗口的最大宽度。 | number | 空 |
| maxHeight | 窗口的最大高度。 | number | 空 |
| trigger | 弹窗出现需要的动作。click表示鼠标点击，hover表示鼠标经过，manual表示自己创建事件，sticky表示直接显示窗口。 | string | click |
| style | 给弹窗附加样式名。 | string | 空 |
| animation | 给弹窗使用弹出昂和关闭动画，可选pop，fade。 | string | 空 |
| multi | 一个页面是否只允许多个窗口出现，可选true，false；true表示可以同时出现多个窗口，false表示只实现本窗口。 | boolean | false |
| arrow | 是指窗口指示箭头。true表示显示，false表示不显示。 | boolean | true |
| closeable | 是指是否显示窗口的关闭按钮。true表示显示，false表示不显示。 | boolean | false |
| padding | 是指是窗口内容是否保留边距。true表示保留，false表示不保留。 | boolean | true |
| type | 是指是内容类型。html是显示网页,iframe是指使用内嵌框架引用单独页面,async是异步调用json。 | string | html |
| url | 是指是内容路径。可以是网址也可以是id，如果type类型是async的话，url应该填写页面地址。 | string | 空 |
| offsetTop | 是指顶部偏移量。 | number | 0 |
| offsetLeft | 是指左侧偏移量。 | number | 0 |
| onShow | 当显示时的回调函数。 | function | function($element) {} |
| onHide | 当隐藏时的回调函数。 | function | function($element) {} |
窗口方向
通过设定placement，使窗口放置在按钮周围各个角度，可选用的值有：top,right,bottom,left,top-right,top-left,bottom-right,bottom-left,left-top,right-top,left-bottom,right-bottom,center,auto-top,auto-bottom,auto-left,auto-right。auto-是根据浏览器自动匹配窗口方向；center是在浏览器绝对居中；默认值auto=bottom
窗口调取页面内容
使用url参数可在窗口装入页面html内容,内容用ax-popup-hide包裹住。使用axPopups.show和axPopups.hide方法显示和隐藏窗口。
<a href="#" class="ax-btn ax-primary" id="pop03">把页面装进来</a>
<div class="ax-popup-hide" id="popcon01"><h1>我被装进来了!</h1></div>
<script type="text/javascript">
$('#pop03').axPopup({
url:'#popcon01',
title:'装入html',
placement:'top',
maxWidth:400,
});
$('#pop04').on('click',function(e){
e.stopPropagation();
axPopups.show('#pop03');
});
$('#pop05').on('click',function(e){
e.stopPropagation();
axPopups.hide('#pop03');
});
</script>
使用axPopups.updateContent方法更新窗口内容。
<script type="text/javascript">
axPopups.show('#pop06',{
title:'我喜欢什么？',
content:'旅游、看电影',
placement:'top',
multi:true,
});
$('#pop07').on('click',function(e){
e.stopPropagation();
axPopups.updateContent('#pop06',$('#popcon02').html());
});
$('#pop08').on('click',function(e){
e.stopPropagation();
var changed = $(this).data('changed')||false;
if (!changed){
axPopups.updateContent('#pop06',$('#popcon02').html());
}else{
axPopups.updateContent('#pop03',$('#popcon03').html());
}
$(this).data('changed',!changed);
});
</script>
反白窗口
使用style:'inverse'参数可实现反白的窗口。
<script type="text/javascript">
$('#pop09').axPopup({
title:'反白窗口',
content:'成功洗白！',
placement:'right',
width:400,
style:'inverse'
});
</script>
自定义关闭按钮
在窗口内容中给元素添加ax-close样式即可作为关闭本窗口的按钮。
<script type="text/javascript">
$('#pop10').axPopup({
title:'自定义关闭按钮',
content:'立即关闭吧 关闭',
placement:'right',
width:400,
});
</script>
同时打开多个窗口
使用multi:true参数即可。
<script type="text/javascript">
$('#pop11').axPopup({title:'多个窗口',content:'1
',placement:'top',multi:true,width:400,closeable:true});
$('#pop12').axPopup({title:'多个窗口',content:'2
',placement:'top',multi:true,width:400,closeable:true});
$('#pop13').axPopup({title:'多个窗口',content:'3
',placement:'top',multi:true,width:400,closeable:true});
</script>
iframe调用远程页面
使用type:'iframe'参数，同时设置url参数值即可。通过width和height设置iframe的宽度和高度。
<script type="text/javascript">
$('#pop14').axPopup({title:'iframe页面',placement:'top',padding:false,width:800,height:600,closeable:true,type:'iframe',url:'http://www.baidu.com'});
</script>
超出内容滚动
通过使用maxWidth和maxWidth参数，可是更多内容滚动。
<script type="text/javascript">
$('#pop15').axPopup({title:'超出滚动',placement:'top',maxWidth:800,maxHeight:200,closeable:true,content:'文字'});
</script>
ajax异步加载
通过使用type:'async'进行异步加载，可引用json或者html。
<script type="text/javascript">
$('#pop16').axPopup({
title:'ajax加载json',
placement:'top',
url:'examples/ajax.json'
type:'async',
content:function(data){
var html = '- ';
for(var key in data){
html+='
- ' + key+''+' '; } html+='
调用同一个内容
将构建好的html代码放置页面中，通过mouseover获得某些参数值，以$(this).axPopup方式创建窗口。
-
<script type="text/javascript"> $('body').on('mouseover','.popg',function(){ var reid=$(this).attr("data-id"); var newStr = $("#popcon04").html() + reid; $(this).axPopup({ content: function() {return newStr;}, placement:'top', width:400, closeable:true, }); }); </script> -
<a href="###" class="ax-btn ax-primary popg" data-id="pl01">我要评论</a> <a href="###" class="ax-btn ax-primary popg" data-id="pl02">继续评论</a> <a href="###" class="ax-btn ax-primary popg" data-id="pl03">追加评论</a> <div id="popcon04">反复调用统一内容。</div>
显示底部按钮
首先使用属性padding:false取消窗口边距；其次借助layout布局构建按钮组。
-
<script type="text/javascript"> $('#pop19').axPopup({ url:'#popcon05', width:400, padding:false, }); </script> -
<a href="###" class="ax-btn ax-primary" id="pop19">我要评论</a> <div id="popcon05" style="display: none"> <div class="ax-padding"> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。 </div> <div class="ax-break-line"></div> <div class="ax-row ax-operate"> <a href="###" class="ax-col ax-col-8"><span class="ax-color-danger">警告</span></a> <span class="ax-gutter-line"></span> <a href="###" class="ax-col ax-col-8">确定</a> <span class="ax-gutter-line"></span> <span class="ax-col ax-col-8"><span class="ax-color-ignore">禁止</span></span> </div> </div>
显示列表
列表使用方法请见：list。
-
<script type="text/javascript"> $('#pop20').axPopup({ url:'#popcon06', width:400, padding:false, }); </script> -
<a href="###" class="ax-btn ax-primary" id="pop20">查看列表</a> <div id="popcon06" 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>
显示表单
表单使用方法请见：input。
-
<script type="text/javascript"> $('#pop21').axPopup({ url:'#popcon07', width:400, padding:false, }); </script> -
<a href="###" class="ax-btn ax-primary" id="pop21">查看表单</a> <div id="popcon07" style="display: none"> <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="username" placeholder="输入登录名称" type="text"></div> </div> <span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-fill"></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="username" 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="username" 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="username" 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="username" placeholder="输入验证码" value="" type="text"></div> <div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-fill"></span>填写完成</div> </div> <a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a> </div> </div> <div class="ax-break-line"></div> <div class="ax-break-md"></div> <button type="button" class="ax-btn ax-primary ax-full ax-margin-lr">提交</button> <div class="ax-break-md"></div> </div> </div>