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>
  • 相关阅读:
    HTML学习基础(一)
    初识C#
    SQL小知识
    jQuery(四)
    jQuery(三)
    认识jQuery(二)
    认识Jquery
    初识Javascript
    初识HTML
    博客,你好!
  • 原文地址:https://www.cnblogs.com/zxyun/p/9448895.html
Copyright © 2011-2022 走看看