解决display none到display block 渲染时间过长的问题，以及bootstrap模态框导致其他框中input不能获得焦点问题的解决...

最新推荐文章于 2024-03-12 12:00:00 发布

dilei8887

最新推荐文章于 2024-03-12 12:00:00 发布

阅读量854

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/pengfei25/p/10288090.html

版权

本文介绍了在使用bootstrap模态框时遇到的渲染速度慢和input无法获得焦点的问题。通过修改模态框的z-index而非使用display:none来提升显示速度，并在显示和隐藏时处理tabindex属性，解决了input焦点问题。确保页面中只存在一个bootstrap模态框以避免冲突。

摘要由CSDN通过智能技术生成

在做定制页面的时候，遇到这么一个问题，因为弹出框用的是bootstrap的自带的弹出框，控制显示和隐藏也是用自带的属性控制

控制显示，在触发的地方例如botton上面加上

data-toggle="modal" data-target="#myModal"

控制关闭，在取消或者确定的地方加上

<button type="button" class="btn btn-primary">Save changes</button>

这样一来就可以关联控制显示和隐藏目标 #myModal 的模态框，但是问题在于

如果模态框中加载的内容过多，因为以上的属性控制底层其实是控制display none或者block，我们知道从none改成block的时候，是会重新渲染整个元素的，所以在再次点击弹出模态框的时候又执行显示的js

就又会加载一次，重复的加载慢，导致不好的用户体验

解决办法：

第一次加载慢，是数据的问题我们这里不讨论，在隐藏之后我们可以不用 display：none，（bootstrap中当然用的是$(el).closest(".modal").modal('hide');）这样显示的时候只能用show（）解决不了问题，

我们在隐藏的时候不用hide，修改其z-index，将z-index改成一个负数，在body的下面，这样他就视觉不显示了，

$(el).closest(".modal").css("z-index",-2);

显示的时候

$('#'+id).closest(".modal").css("z-index",1050);

这样一来，只有第一次加载的时候慢，其余来回点击的时候会速度快

步骤：

1、去掉关联

　　点击关联时：data-toggle="modal" data-target="#myModal"
　　关闭关联时：btn-primary

2、js控制显示和隐藏直接上代码：

直接上代码

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>解决display渲染时间过长的问题</title>
  <!-- 设置 viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- IE -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 兼容国产浏览器的高速模式 -->
  <meta name="renderer" content="webkit">
 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css