解决display none到display block 渲染时间过长的问题，以及bootstrap模态框导致其他框中input不能获得焦点问题的解决
在做定制页面的时候，遇到这么一个问题，因为弹出框用的是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/bootstrap.min.css">
<style>
/*添加一个背景，辅助 z-index显示或者隐藏用*/
body::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff;
z-index:-1;
}
</style>
</head>
<body>
<button type="button" class="btn btn-primary btn-lg add-button" data-class="myModal" >Launch demo modal</button> <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<ul id="UL" style="max-height:700px;overflow:auto;">
<li></li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="initModel.hide(this)">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- 引入 Bootstrap 的 JS 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script>
var str="";
for(var i=0;i<80000;i++){
str+="<li><a>"+i+"</a></li>"
}
$("#UL").html(str);
$(function(){
$("body").on("click",".add-button",function(e){
initModel.show($(e.target).attr("data-class"));//motai
})
})
window.initModel={
show:function (id){
//显示摸态框
$('#'+id).modal('show')
$('#'+id).closest(".modal").css("z-index",1050);
$(".modal-backdrop").show();
},
hide:function(el){
//$(el).closest(".modal").modal('hide');
$(el).closest(".modal").css("z-index",-2);//如果用上面句的代码渲染时间会很长，造成不好的用户体验
$(".modal-backdrop").hide();//隐藏bootstrap自带的遮罩层
}
}
</script>
</body>
</html>
重要：页面中只能存在一个bootstrap模态框，如果还存在其他弹框，会导致其他弹出框的input不能获得焦点，因为bootstrap里面定义了tabindex作用
tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序。tabIndex的值可为0至32767之间的任意数字。
如果使用-1值时，onfocus与onblur事件仍被启动。tabIndex的值可为0至32767之间的任意数字
所以在设置显示和隐藏的时候将tabindex=“-1”的属性去掉既可
/**
* 页面定制
*
* @author hpf
* @since 2019-01
*
*/ (function($){
/**
* 控制dialog的显示和隐藏
*/
$.fn.showorhideModel={
show:function(id){
//显示dialog（改z-index）
$('#'+id).modal('show')
$("#"+id).css("z-index",1050)
//显示模态框
$(".modal-backdrop").show();
$('#'+id).removeAttr("tabindex");
},
hide:function(el){
//隐藏dialog(改z-index)
var $el=$(el).closest(".modal");
$el.css("z-index",-1);
//将模态框的tabindex去掉，因为会导致其他的弹出层中input不能获得焦点
$el.removeAttr("tabindex")
//隐藏模态框
$(".modal-backdrop").hide();
}
}
})(jQuery)
解决display none到display block 渲染时间过长的问题，以及bootstrap模态框导致其他框中input不能获得焦点问题的解决的更多相关文章
- Bootstrap 模态对话框只加载一次 remote 数据的解决办法 转载
http://my.oschina.net/qczhang/blog/190215 摘要 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹 ...
- Bootstrap 模态对话框只加载一次 remote 数据的解决办法
原文: https://my.oschina.net/qczhang/blog/190215?p=1
- display:inline 和display:inline-block和display:block的区别
之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...
- CSS中的display属性（none,block,inline,inline-block,inherit）
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:box和display:inline-box的区别
display:box我想大家很熟悉,那么display:inline-box呢,今天在项目中需要设置这样的属性box-align:center,那么就想到用 display:box;如果设置BOX, ...
- 关于Django ModelForm渲染时间格式问题
关于Django ModelForm渲染时间格式问题 直接定义DateTimeInput或者DateTimeFile是不行的,渲染在html页面中的仍然是Input text类型 解决办法:自定义小部 ...
- js style.display = "" 和style.display="none" 区别
style.display = "":是清除display样式,display将使用默认值(块元素会变成block,内联元素会变成inline)style.display=&quo ...
- 从解析HTML开始，破解页面渲染时间长难题
摘要:在本文中,将重点关注网页的初始渲染,即它从解析 HTML 开始. 我将探索可能导致高渲染时间的问题,以及如何解决它们. 本文分享自华为云社区<页面首屏渲染性能指南>,作者:Ocean ...
随机推荐
- Ubuntu : 解决更新时出现 Unable to locate package update
当用apt-get更新软件包时常出现错误提示Unable to locate package update, 尤其是在ubuntu server上,解决方法是: 先更新apt-get ...
- Android Messenger
说到Android进程间通信,大家肯定能想到的是编写aidl文件,然后通过aapt生成的类方便的完成服务端,以及客户端代码的编写.如果你对这个过程不熟悉,可以查看Android aidl Binder ...
- 深入理解java虚拟机（十四）正确利用 JVM 的方法内联
在IntelliJ IDEA里面Ctrl+Alt+M用来拆分方法.选中一段代码,敲下这个组合,非常简单.Eclipse也用类似的快捷键,使用 Alt+Shift+M.我讨厌长的方法,提起这个下面这个方 ...
- 基于行块分布函数的通用网页正文内容抽取（带HTML格式）
算法思路: 假如网页正文(过滤html标签后的)有n行,以k行为一行块,总共可构成n-k+1行块: 以行号为索引号,以行块长度为索引值,形成行块稀疏矩阵: 以上面的稀疏矩阵为基础,找出其骤升骤降点,分 ...
- Linux常用开发指令
gcc mysqltest.c -o mysqltest `mysql_config –cflags –libs`
- 【转】Android - 线程同步
什么是线程同步? 当使用多个线程来访问同一个数据时,非常容易出现线程安全问题(比如多个线程都在操作同一数据导致数据不一致),所以我们用同步机制来解决这些问题. 实现同步机制有两个方法: 1.同步代码块 ...
- WPF成长之路------帧动画（1）
最近公司的一个项目因为是WPF的,而自己已经很长一段时间没有接触过WPF了,再加上之前没有做过wpf的动画效果,因此在学习的过程中也顺便记录一下,说不定以后还会用上,同时也算是总结一下吧!刚开始写博客 ...
- Spring各个jar包详解
Spring各jar包详解 spring.jar 是包含有完整发布模块的单个jar 包.但是不包括mock.jar,aspects.jar, spring-portlet.jar, and sprin ...
- C++中引用的形参使用
引用解释: (1)引用仅是变量的别名,而不是实实在在地定义了一个变量,因此引用本身并不占用内存,而是和目标变量共同指向目标变量的内存地址,即共用内存 (2)引用和目标变量的地址是一样的,对引用的操作与 ...
- Django-03视图层
5.1 视图函数 一个视图函数,简称视图,是一个简单的Python 函数,它接受Web请求并且返回Web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者一张图片 ...