解决移动端模态框交互问题：滑屏联动、ios橡皮筋

最近在做项目需要用户同意协议，一开始的做法是跳转到另外一个页面去查看条款，但是页面一跳转原来上传的图片信息就没有了。后面觉得用模态框来展示就能解决这个问题，于是我找到了一个很好用的移动端弹窗插件：dialog2。但是在使用弹窗的时候就出现了滑屏联动的问题，ios 下可能还会出现橡皮筋效果，于是百度，看了三篇文章终于把问题完美的解决了。

第一篇：移动端弹出模态框禁止页面滑动

这篇文章确实很好的解决了滑屏联动的问题，但是没有解决弹出窗口之后，模态框下面的页面会跳转到顶部的问题。而且也没有贴出 HTML 代码，所以问题还是没有得到解决。

这个问题在：JS弹出层，怎样不回到页面顶部 这篇文章中得到了解决。

还有一篇文章是：移动端模态窗口的滚动和橡皮筋问题解决方案 不知道他用的是 Vue 的缘故还是其他原因，我在微信中测试下来问题是没有得到解决，其实只需要把第一篇文章中的滚动隐藏的代码加上就行了，不过他向我们介绍了什么是模态框和滑屏联动，还是值得一读。

我把三篇文章的精华进行了实践和总结写了这篇文章，废话不多说直接贴代码吧。

<label for="weuiAgree" class="weui-agree">
        <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox" disabled />
        <span class="weui-agree__text">
            <a href="###" id="clause">我已知晓上述条款内容，并同意按上述条款执行</a>
        </span>
    </label>

//#region 显示条款
    $("#clause").click(function () {
        var clauseDialog = $(this).dialog({
            titleText: "信用承诺书",
            content: '<article class="weui-article"><section><p>本人已仔细阅读了业务受理相关办理流程，了解业务所需材料，在申请业务受理事项中，本人郑重承诺：</p><p>（一）对提供资料的合法性、真实性、准确性和有效性负责;</p><p>（二）严格遵守《合同》相关规定，全面履行应尽的责任和义务，接受单位的监督管理;</p><p>（三）同意将信用承诺和自身信用信息纳信用信息共享平台；</p><p>（四）违背承诺约定将承担违约责任，并接受《社会法人守信激励和失信惩戒管理办法》、《自然人守信激励和失信惩戒管理办法》和相关部门规章制度的惩戒和约束；</p><p>（五）同意将承诺内容上网公示，接受社会监督。</p></section></article>',
            onBeforeShow: function () {
                document.body.style.overflow = 'hidden';
                // 模态弹窗模式下，禁止滚动及ios下的橡皮筋效果
                document.addEventListener('touchmove', stopScroll);
            },
            onBeforeClosed: function () {
                document.body.style.overflow = '';
                // 关闭弹窗时，释放touchmove
                document.removeEventListener('touchmove', stopScroll);
            }
        });
    });
    //#endregion

    function stopScroll(event) {
        // 使用阻止默认事件，来阻止scroll和橡皮筋
        event.preventDefault();
    }