Popup 弹窗

基本使用方法 PLUGIN

WebUI-Popover是非常优秀的弹窗插件,本框架在v1.2.18基础上进行了改造和深度整合,详见Github。以下是对该插件的修改项。

  • 新增placement属性:center,使用该属性会在浏览器固定居中。
  • 针对手机端做了适配,在手机端打开窗口均是placement:center。
  • 新增maxWidth属性,显示窗口的最大宽度。
  • 新增maxHeight属性,显示窗口内容部分的最大高度,超出滚动显示。
  • 修改WebuiPopovers方法为axPopups。

本框架的Popup弹窗有两种使用方法,一种是将参数如titlecontentwidth等信息直接写入按钮;第二种是将参数写入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.showaxPopups.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参数值即可。通过widthheight设置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>
                          

超出内容滚动

通过使用maxWidthmaxWidth参数,可是更多内容滚动。

                            <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+='
'; return html; } }); </script>

调用同一个内容

将构建好的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>