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">×</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" ，取消动画后，不再卡顿。
