zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    2018.12.29-dtoj-3626
    2018.12.28-bzoj-3784-树上的路径
    2018.12.28-bzoj-2006-[NOI2010]超级钢琴
    2018.12.28-dtoj-3648-寝室管理
    2018.12.27-dtoj-4089-line
    2018.12.27-dtoj-3151-相遇
    2018.12.25-dtoj-4086-针老师(truth) || dtoj-3657: 排列(permutation)
    不要62 hdu2089
    Kia's Calculation hdu4726
    The Moving Points hdu4717
  • 原文地址:https://www.cnblogs.com/zxyun/p/9448895.html
Copyright © 2011-2022 走看看