在做定制页面的时候，遇到这么一个问题，因为弹出框用的是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. JavaScript - this详解 （一）

    侃侃JavaScript中的this this为何如此多变? this总是跟它的执行上下文有关,而在JavaScript总会有开辟新的执行上下文的东西,比如函数,所以,this才如此的变化. 执行环境 ...

  2. Mac上修改MySQL默认字符集为utf8

    1.检查默认安装的mysql的字符集 mysql> show variables like '%char%'; +--------------------------+------------- ...

  3. ListControl的用法

    ListControl 控件可在窗体中管理和显示列 表项.可控制列表内容的显示方式,能够以图标和表格的形式显示数据.打开ListControl控件的属性窗口,在Styles选项卡中的View属性中 可 ...

  4. Web应用与Spring MVC锁session

    http是无连接的,所以服务器上并不会为每个用户开辟一个线程,因为没有用户这个说法,但是服务器端是有session的,为了防止一个用户同时有多个请求在处理,spring mvc在处理请求时把sessi ...

  5. [LINK]List of .NET Dependency Injection Containers (IOC)

    http://www.hanselman.com/blog/ListOfNETDependencyInjectionContainersIOC.aspx I'm trying to expand my ...

  6. robot自动化分层设计

    robot framework框架分层设计

  7. WPF 之 UI 异步交互

    System.Windows.Application.Current.Dispatcher.BeginInvoke(new Action(()=> { //··················· ...

  8. MongoDB基础知识记录

    MongoDB基础知识记录 一.概念: 讲mongdb就必须提一下nosql,因为mongdb是nosql的代表作: NoSQL(Not Only SQL ),意即“不仅仅是SQL” ,指的是非关系型 ...

  9. 2018OCP最新题库052新加考题及答案整理-27

    27.Examine these facts about a database: 1. USERS is the database default tablespace. 2. USER1, USER ...

  10. [AGC003F] Fraction of Fractal 矩阵快速幂

    Description ​ SnukeSnuke从他的母亲那里得到了生日礼物--一个网格.网格有HH行WW列.每个单元格都是黑色或白色.所有黑色单元格都是四联通的,也就是说,只做水平或垂直移动且只经过 ...