在做定制页面的时候，遇到这么一个问题，因为弹出框用的是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. [IE bug] ajax请求 304解决方案

    最近和筒子们做了个校园电台,进去之后会自动播放歌曲,每首放完了的话会随机get新的json,然后再播放下一首 整体做成了命令行的风格,在最后输入next,start等命令来操作,5+M/s校园网+W级 ...

  2. SQL Server 2012 表分区

    转载于:https://www.cnblogs.com/knowledgesea/p/3696912.html 什么是表分区 一般建立数据库表时,表数据都存放在一个文件里. 但是如果是分区表的话,表数 ...

  3. .net core2.1 CookieHelper

    /// <summary> /// ** 描述:Cookie for .net core2.1 /// ** 创始时间:2018-11-19 /// ** 修改时间:- /// ** 作者 ...

  4. Android应用开发以及设计思想深度剖析

    Android应用开发以及设计思想深度剖析(1) 21cnbao.blog.51cto.com/109393/956049

  5. FPN（feature pyramid networks）

    多数的object detection算法都是只采用顶层特征做预测,但我们知道低层的特征语义信息比较少,但是目标位置准确:高层的特征语义信息比较丰富,但是目标位置比较粗略.另外虽然也有些算法采用多尺度 ...

  6. todolist作业涉及知识点

    window.event对象详细介绍 1.event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等.event对象只在事件发生的过程中才有效.event的某些属性只对特定 ...

  7. Ubuntu的中文乱码问题

    目标:使系统/服务器支持中文,能够正常显示. 1.首先,安装中文支持包language-pack-zh-hans: $ sudo apt-get install language-pack-zh-ha ...

  8. 自己实现一个shell

    用C实现一个简单的交互式shell,要求:当用户输入一行命令时,识别程序名和参数并调用适当的exec函数执行程序,等待执行完成后给出提示符. exec函数实际上是六种以exec开头的函数,统称exec ...

  9. nginx高性能WEB服务器系列之一简介及安装

    nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...

  10. gitlab容器--带https配置

    #2.gitlab 重要目录 /home/maks/gitlab/config /etc/gitlab /home/maks/gitlab/logs /var/log/gitlab /home/mak ...