Modal 模态对话框

需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。

Modalh5ui.io

触发器 添加 data-toggle="modal" 和 data-target="#modal-example"，其中 data-target="" 对应 Modal 模态对话框的 id。

<!-- 按钮触发事件 -->
<a href="javascript:void(0);" data-toggle="modal" data-target="#modal-example">
    点击触发Modal
</a>

<!-- Dialog -->
<div class="h5ui-modal_share" id="modal-example" tabindex="-1" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog middle">
        <div class="modal-content">
            <div class="modal-header">
                我是Modal
            </div>
        </div>
    </div>
</div>

分享对话框

<div class="h5ui-modal_share" id="modal-share" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog bottom">
        <div class="modal-content clearfix">
            <div class="modal-header">
                分享给好友
            </div>
            <div class="modal-body clearfix">
                <a href="" class="item"><i class="icon"></i>二维码分享</a>
                <a href="" class="item"><i class="icon"></i>腾讯微博</a>
                <a href="" class="item"><i class="icon"></i>QQ好友</a>
                <a href="" class="item"><i class="icon"></i>QQ空间</a>
            </div>
            <div class="modal-footer">
                <a href="javascript:void(0);" class="h5ui-btn" data-dismiss="modal">取消</a>
            </div>
        </div>
    </div>
</div>

菜单对话框

<div class="h5ui-modal_actionsheet" id="modal-menus" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog bottom">
        <div class="modal-content clearfix">
            <div class="modal-body">
                <a href="javascript:void(0);" class="h5ui-btn" data-dismiss="modal">拍照</a>
                <a href="javascript:void(0);" class="h5ui-btn" data-dismiss="modal">从手机相册选择</a>
                <a href="javascript:void(0);" class="h5ui-btn" data-dismiss="modal">保存图片</a>
            </div>
            <div class="modal-footer">
                <a href="javascript:void(0);" class="h5ui-btn" data-dismiss="modal">取消</a>
            </div>
        </div>
    </div>
</div>

长内容对话框

一般用于条款协议等长内容显示。

<div class="h5ui-modal" id="modal-middle" tabindex="-1" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog middle">
        <div class="modal-content clearfix">
            <div class="modal-header">
                使用条款协议
            </div>
            <div class="modal-body">
                <p>
                    本协议适用于您使用苹果的各项服务（“服务”），通过这些服务，您可以购买、获取、许可、租赁或订阅媒体、app（“App”）和其他应用内服务（合称“内容”）。
                </p>
                <p>
                    我们的服务如下：iTunes Store、App Store、iBooks Store、Apple Music和Apple News。您可以创建一个用于使用中国服务的账户，同时表示您指定了居住并纳税的国家（“居住国”），您可以在居住国获取并使用我们的服务。为了使用我们的服务，您需要具备兼容的硬件、软件（推荐使用最新版本，有时必须使用最新版本）和互联网访问能力（可能产生费用）。我们服务的性能可能受这些因素影响。
                </p>
                <p>
                    您必须年满13周岁（或注册程序规定的居住国内的最低年龄）才能创建Apple ID和使用我们的服务。未满13岁的个人账户需要由家长或法定监护人为使用家庭共享功能而创建，或由获准教育机构创建。
                </p>
                <p>
                    服务和部分App允许您以订阅方式购买内容（“付费订阅”）。在账户设置的“管理订阅”部分取消订阅之前，付费订阅自动续展。如果付费订阅价格上涨，我们将通知您，必要时在征得您的同意后才继续提供服务。在最新付费订阅开始前24小时之内，我们将通过您的支付方式收费。在从您的支付方式中扣除订阅费用前，部分付费订阅可提供免费试用。在我们收费前，如果您决定停止付费订阅，请在免费试用结束前取消订阅。
                </p>
            </div>
            <div class="modal-footer">
                <a href="javascript:void(0);" class="h5ui-btn" data-dismiss="modal">我知道了</a>
            </div>
        </div>
    </div>
</div>