在做定制页面的时候，遇到这么一个问题，因为弹出框用的是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">&times;</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不能获得焦点问题的解决的更多相关文章

  1. Bootstrap 模态对话框只加载一次 remote 数据的解决办法 转载

    http://my.oschina.net/qczhang/blog/190215 摘要 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹 ...

  2. Bootstrap 模态对话框只加载一次 remote 数据的解决办法

    原文: https://my.oschina.net/qczhang/blog/190215?p=1

  3. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  4. CSS中的display属性（none,block,inline,inline-block,inherit）

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  5. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  6. display:box和display:inline-box的区别

    display:box我想大家很熟悉,那么display:inline-box呢,今天在项目中需要设置这样的属性box-align:center,那么就想到用 display:box;如果设置BOX, ...

  7. 关于Django ModelForm渲染时间格式问题

    关于Django ModelForm渲染时间格式问题 直接定义DateTimeInput或者DateTimeFile是不行的,渲染在html页面中的仍然是Input text类型 解决办法:自定义小部 ...

  8. js style.display = "" 和style.display="none" 区别

    style.display = "":是清除display样式,display将使用默认值(块元素会变成block,内联元素会变成inline)style.display=&quo ...

  9. 从解析HTML开始，破解页面渲染时间长难题

    摘要:在本文中,将重点关注网页的初始渲染,即它从解析 HTML 开始. 我将探索可能导致高渲染时间的问题,以及如何解决它们. 本文分享自华为云社区<页面首屏渲染性能指南>,作者:Ocean ...

随机推荐

  1. 【targeting学习笔记】Display Advertising Targeting

    背景:stanford的计算广告学(computational advertising)课程,yahoo的人主讲,课程链接:http://www.stanford.edu/class/msande23 ...

  2. CentOS下安装PHP的AMQP扩展方法和步骤

    AMQP,即Advanced Message Queuing Protocol,一个提供统一消息服务的应用层标准高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计.基于此协议的客户端 ...

  3. Nhibernate 存储过程获取返回值

    写在前面:因为项目使用ssh.net所以做着做着要调用存储过程,而且是有返回值的,按照以前的做法直接在参数里指定下就可以获取,但是在nhibernate里调用就有点陌生了,百度一下得出的结果有两种:第 ...

  4. Spring学习（三）——集成 Velocity

    上篇文章http://www.cnblogs.com/wenjingu/p/3822989.html我们使用Gradle构建了一个简单的Spring MVC Web应用程序, 本篇将在上篇的基础上将j ...

  5. ASP.NET Core入门（一）

    大家好,很荣幸您点了开此篇文章,和我一起来学习ASP.NET Core,此篇文字为<ASP.NET Core入门>系列中的第一篇,本系列将以一个博客系统为例,从第一行代码,到系统发布上线( ...

  6. OI计算几何 简单学习笔记

    学习平面几何,首先我们要会熟练地应用向量,其次也要知道一些基本的几何知识.(其实看看数学课本就可以了吧) 因为是看的蓝书,所以很多东西做了引用.(update:还参考了赵和旭dalao的讲义) 下面先 ...

  7. 牛客网提高组模拟赛第七场 T2 随机生成树

    其实看懂题就很水啦qwq,就是求\(1-N\)的约数啦. 暴力求的话时间复杂度是\(O(NlogN)\)的,其实正解是枚举每个数的倍数......这样的时间复杂度是\(\frac{N}{1}+\fra ...

  8. 201621123023《Java程序设计》第6周学习总结

    一.本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 二.书面作业 1. clone方法 1.1 在te ...

  9. 在线绘图网站 UML、思维导图、 流程图、 用例图等等

    https://www.processon.com/ 用我的微信登录即可 帐号是 QQ邮箱

  10. 剑指offer35题：第一个只出现一次的字符+剑指offer55题：字符流中第一个不重复的字符+剑指offer51题：数组中重复的数字

    在看剑指offer的时候,感觉这三个题目很像,都是用哈希表可以解决,所以把这三个题整理出来,以供复习. 剑指offer35题:第一个只出现一次的字符 题目描述:在字符串中找出第一个只出现一次的字符.如 ...