在做定制页面的时候，遇到这么一个问题，因为弹出框用的是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. kafka （搜索） 在idea api操作（官方apihttp://kafka.apache.org/documentation/#producerapi）

     https://blog.csdn.net/isea533/article/details/73822881        这个不推荐,可以看一下(https://www.cnblogs.com/b ...

  2. Mysql企业实战

    ==========================业务垂直分割:1>介绍说明: 随着公司的业务规模扩展,DBA需要根据企业数据业务进行切割,垂直切割又称为纵向切割,垂直数据切割是根据企业网站业 ...

  3. zookeeper DataTree内存模型介绍及对Znode的四大特性介绍和Stat结构分析

    一. zookeeper的内存模型   1. zookeeper是一个由 znode节点组成的一个树形结构 2. 每个znode都可以做成一个subject...     3. 客户端可以监控每一个节 ...

  4. [LeetCode题解]: Sort Colors

    前言   [LeetCode 题解]系列传送门:  http://www.cnblogs.com/double-win/category/573499.html   1.题目描述 Given an a ...

  5. HBase介绍(3)---框架结构及流程

    HBASE依托于Hadoop的HDFS作为存储基础,因此结构也很类似于Hadoop的Master-Slave模式,Hbase Master Server 负责管理所有的HRegion Server,但 ...

  6. MongoDB集群方案介绍

    MongoDB集群方案介绍 一.什么是mongodb集群? 是指由多台mongodb服务器组成的服务器集群,称之为mongodb集群. 二.mongodb集群搭建的方式: 1.Replica Set  ...

  7. 网易严选的wkwebview测试之路

    本文来自网易云社区 作者:孙娇 UIWebView是苹果继承于UIView封装的一个加载web内容的类,它可以加载任何远端的web数据展示在你的页面上,你可以像浏览器一样前进后退刷新等操作.不过苹果在 ...

  8. 【RabbitMQ学习记录】- 消息队列存储机制源码分析

    本文来自 网易云社区 . RabbitMQ在金融系统,OpenStack内部组件通信和通信领域应用广泛,它部署简单,管理界面内容丰富使用十分方便.笔者最近在研究RabbitMQ部署运维和代码架构,本篇 ...

  9. SDOI2013 淘金

    题目链接:戳我 昨天做的题了,今天补一发题解. 是一个比较奇怪的数位DP.详细的我还是写代码注释里好了,感觉直接说不好描述. 代码如下: #include<iostream> #inclu ...

  10. [网络流24题][CTSC1999] 家园

    题目链接:戳我 对于这种一个点(表面意义上的一个点,比如说一个位置)对应多种情况的(比如说随着时间的推移有着不同的状态,而且这种状态>2),我们考虑在类似于分层图上面跑网络流. 比如说这道题,周 ...