jqweui Popup 使用说明

 

 

    

 

使用步骤说明：

今天遇到一个问题，无论怎么点击一个图标都不会弹出对应的遮罩层，但是把示列代码拷贝过来又可以正常显示：结果是由于在复制的时候把 # 号弄掉了

 错误操作展示： 

<a href="javascript:;"  class="tl-tag-right open-popup" data-target="half"><img  class="tl-xl-15 "  src="../res/image/xll.png"></a>

 

正确使用的步骤：

<a href="javascript:;"  class="tl-tag-right open-popup" data-target="#half"><img  class="tl-xl-15 "  src="../res/image/xll.png"></a>

//加入样式 和自定义的标签  open-popup    data-target="#half"


//第二部  引入需要展示的遮罩层和显示组件

<div id="half" class='weui-popup__container popup-bottom'>
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="toolbar">
                <div class="toolbar-inner">
                    <a href="javascript:;" class="picker-button close-popup">关闭</a>
                    <h1 class="title">标题</h1>
                </div>
            </div>
            <div class="modal-content">
                <div class="weui-grids">
                    <a href="javascript:;" class="weui-grid js_grid" data-id="dialog">
                        <div class="weui-grid__icon">

                        </div>
                        <p class="weui-grid__label">
                            发布
                        </p>
                    </a>
                    <a href="javascript:;" class="weui-grid js_grid" data-id="progress">
                        <div class="weui-grid__icon">

                        </div>
                        <p class="weui-grid__label">
                            编辑
                        </p>
                    </a>
                    <a href="javascript:;" class="weui-grid js_grid" data-id="msg">
                        <div class="weui-grid__icon">

                        </div>
                        <p class="weui-grid__label">
                            保存
                        </p>
                    </a>

                </div>
            </div>
        </div>
    </div>