关于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、这样就可以实现了