javascript - 展开可折叠的 div 后阻止 ui-6ren

javascript - 展开可折叠的 div 后阻止 ui

转载作者：太空宇宙更新时间：2023-11-04 12:33:16

在我的应用程序中，我正在调用 ajax 来获取一些数据。我正在显示一个微调器并通过以下代码阻止用户界面:

function myFunction() {
  $(".spinner").show();
  $('#shadow').addClass('blocker');
  setTimeout(function() {
    $(".spinner").hide();
    $('#shadow').removeClass('blocker');
  }, 3000);
}

.spinner {
  position: absolute;
  right: 45%;
  bottom: 50%;
  z-index: 9999;
}
.shadow {
  z-index: 900
}
.blocker {
  z-index: 1000;
  height: 100%;
  width: 100%;
  background: #000000;
  opacity: 0.3;
  left: 0;
  top: 0;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />



<button onclick="myFunction()">Try it</button>

<div id="accordion" class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
            </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        <p>1Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Twitter Bootstrap?</a>
            </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
            </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        <p>3Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
      </div>
    </div>
  </div>
</div>


<div id="shadow"></div>

<div id="spinner" class="spinner" style="display: none;">Loading...</div>

这段代码在我扩展一个链接之前工作正常。如果我在展开任何链接后点击按钮，那么黑色图层不会占据页面的整个高度。

重现步骤:-

展开任何链接
点击按钮
向下滚动以查看问题。

我尝试过用户溢出属性，但没有成功。

黑色层如何在所有情况下都占据全高(链接展开)？

最佳答案

试试这个 .blocker{position: fixed;}

function myFunction() {
  $(".spinner").show();
  $('#shadow').addClass('blocker');
  setTimeout(function() {
    $(".spinner").hide();
    $('#shadow').removeClass('blocker');
  }, 3000);
}

.spinner {
  position: absolute;
  right: 45%;
  bottom: 50%;
  z-index: 9999;
}
.shadow {
  z-index: 900
}
.blocker {
  z-index: 1000;
  height: 100%;
  width: 100%;
  background: #000000;
  opacity: 0.3;
  left: 0;
  top: 0;
  position: fixed;/* change absolute to fixed */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />



<button onclick="myFunction()">Try it</button>

<div id="accordion" class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
            </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        <p>1Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Twitter Bootstrap?</a>
            </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
            </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        <p>3Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
        <p>2Div</p>
      </div>
    </div>
  </div>
</div>


<div id="shadow"></div>

<div id="spinner" class="spinner" style="display: none;">Loading...</div>

关于javascript - 展开可折叠的 div 后阻止 ui，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27479538/

文章推荐： Python - 打开新的 shell 并运行命令

文章推荐： java - OS X 中的 SQLite 问题

文章推荐： c++ - 运行几次后 Vscode 自动格式代码停止工作

文章推荐： linux - UNIX编程

jQuery 可折叠
我正在尝试创建一个无序列表，其中每个包含另一个无序列表。我想要触发子菜单向下滑动的列表项有类 mobile-collapse子菜单有类 mobile-drop-menu 。这是我的 jquery 代
Java 可折叠 if 语句
我使用 PMD检查我的代码。在大多数情况下，它给了我非常有用的提示，但我无法弄清楚在以下情况下可以改进什么。原始代码如下所示: if ((getSomething() != null && getS
javascript - 可折叠/可展开的表格行为
需要一些 jquery/js/jsp 功能的帮助.. 我有一个可折叠的表格脚本: (function($){ $.fn.extend({ setupCollapstable: funct
javascript - 可折叠 Accordion
我使用 CSS 和 Javascript 创建了一个 Accordion ，但我不知道如何在选择不同的 Accordion 后折叠打开的 Accordion 。我试过在 Javascript 中使用可
javascript - 可折叠，具有内容相关的展开大小
我使用 CSS 和 JS 编写了一个可折叠按钮，我想将一个按钮嵌套在另一个按钮中。是否可以动态调整第一个/外部按钮的高度，以便在打开第二个/内部按钮时，第一个按钮的高度增加第二个按钮的高度？这是我
jQuery 可折叠 UL
我正在使用 jQuery 创建一个导航系统。我想要实现的是在页面加载时显示父元素并隐藏子元素。我做得非常简单。然而，当我在其他父元素之间切换时，我希望能够隐藏之前的子元素，以便我只能打开一个一次。
Flutter 可折叠/可扩展卡片
我正在尝试匹配这个设计点击卡片应该展开我不能用卡片包裹扩展 block ，因为扩展 block 基本上只有一行，我试着按照这个例子 flutter_catalog 我在谷歌上搜索了很多，但找不到我
Javascript 可折叠 div 不起作用？
我正在尝试切换 div 以使其可见/隐藏。我正在制作一个排行榜，我想打开它，但只能在单击时打开。 test fu
css - Materialise CSS - 可折叠
我正在使用 Materialize CSS 并使用可折叠的 Accordion 式元素 ( http://materializecss.com/collapsible.html )。出于某种原因，当
php - 如何使递归 TreeView 可折叠
我有一个递归 TreeView ，它从数据库中提取所有信息，并且想了解如何使其可折叠。我尝试使用 Jquery 和 Javascript，但都没有任何效果。不确定是我的错误还是其他原因。这是我的基本
java - Sonar 可折叠 if 语句
我收到异常“可折叠 if 语句”。通过以下代码中的 Sonar 。 if(getSomething().equals(getSomething()){ if(getsomehing.contai
javascript - Angular 可折叠 Accordion
我正在制作 Accordion 以在 Angular 应用程序中使用 javascript 制作可折叠的 div.. 为此，如果单击Parent One 或任何其他父名称上的按钮未打开它.. HTML
reactjs - Ant Design - 使菜单可折叠/可折叠
我正在将 Ant Design 与 React 一起使用。 Ant Design 有一个菜单组件:https://ant.design/components/menu/ 是否可以使菜单不可折叠/展开？
twitter-bootstrap - 可折叠 Bootstrap ，显示第一个元素
我想展示这个可折叠 Accordion 的第一个元素。我在互联网上做了一些研究，但徒劳无功 Aller au dossier personnel
haskell - 可折叠、Monoid 和 Monad
考虑以下 foldMap 的签名 foldMap :: (Foldable t, Monoid m) => (a -> m) -> t a -> m 这与“绑定(bind)”非常相似，只是交换了参数:
Django admin - 如何使 "inlines"可折叠？
使用“fieldsets”，您可以通过指定 CSS 类“collapse”使其可折叠。如何对“内联”做同样的事情？谢谢! 最佳答案在 Django 1.10+ 中: class MyModelInl
javascript - YUI dataTable 行可展开/可折叠
有人已经用 YUI dataTable 制作了如下示例的脚本吗？示例: http://extjs.com/deploy/dev/examples/tree/column-tree.html http
python - wxpython 可折叠 Pane 大小响应不一致
好吧，有些事情很奇怪，我无法弄清楚。假设我有一些类别，每个类别都有一些项目，全部放入字典中。 import wx nyoom = {} nyoom['spiders'] = ['Yellow Sac'
c# - Xamarin Forms 可折叠 StackLayout
我正在尝试实现一种可折叠的 StackLayout。每次用户单击按钮时，它都会展开或折叠堆栈布局以显示/隐藏更多详细信息。我能够通过下面的代码实现更多/更少的效果，但它看起来不对而且效果也不是很好，
android - 可折叠 View 不适用于 viewpager
我的布局包含顶部的水平 recyclerView 和 viewPager。 ViewPager 在其每个选项卡中都有一个 recyclerView。我想在用户滚动布局时折叠顶部水平回收器 View

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 展开可折叠的 div 后阻止 ui