BootStrap模态框卡顿问题解决

1. 背景

最近做了项目,前端使用了BootStrap模态框,类似下面代码。具体使用的场景是在一个.net桌面程序的WebBrowser控件中内嵌该网页,还有在Android应用的WebView控件中内嵌该网页。

<!-- 模态框 -->
<div class="modal fade" id="modal-demo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="modal-demo-title">标题</h4>
            </div>
            <div class="modal-body">内容</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

2. 问题

使用IE浏览器和Chrome浏览器调用模态框均没有问题,动画效果很棒也很流畅。

但是使用.net或者Android应用程序内嵌该网页时,模态框显示和隐藏明显卡顿,非常影响客户体验。

3. 解决

找到问题就很好解决了,要么就不用Bootstrap的模态框,换一个弹窗组件比如Layui的弹出层。要么索性把动画效果去掉。

class="modal fade" 改为class="modal" ,取消动画后,不再卡顿。


如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页