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>