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>

巴特西

jqweui Popup 使用说明

最新文章

热门文章