jQuery组件（Popup）

关于Popup

---

它有两种形式，一种是全屏（默认），一种是显示在底部

1.全屏默认popup

---

它有一个模板，代码如下：

<div id="" class="weui-popup__container">
  <div class="weui-popup__overlay"></div>
  <div class="weui-popup__modal">
    你的内容放在这里...
  </div>
</div>

打开popup 

然后可以设置一个链接，通过点击这个链接可以弹出该模板

<a href="javascript:;" class="open-popup" data-target="">About</a>

其中 class='open-popup' 和 data-target="" 两个属性不可缺少，前者表示点击链接需要打开一个 popup，后者是这个popup的选择器 

当然，你也可以通过调用 JS 方法来打开一个 popup：

$("#about").popup();

效果如图：

当点击About按钮时，弹出该模板 

2.显示在底部popup 

---

模板代码如下：

即在容器上增加一个类 popup-bottom

<div id="" class="weui-popup__container popup-bottom">
  <div class="weui-popup__overlay"></div>
  <div class="weui-popup__modal">
    你的内容放在这里...
  </div>
</div>

关闭popup 

给任何链接加上 class='close-popup' 则点击之后可以关闭当前打开的 popup. 你也可以通过 $.closePopup() 来关闭。

 使用步骤：

1、先引入对应的js文件（非常重要）。

<script src="web/js/jquery.js"></script>
<script src="web/wx/js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>

2、定义点击区域会弹出底部弹出层，这里我把这个定义为了一个div，因为我发现用官方文档中的a标签非常不好用。

<div class="open-popup" data-target="#half">底部面板</div>

3、定义弹出层。

<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>

4、这样就可以实现了