如何使用 jQuery 阻止 <div>答案

【问题标题】：How to block a <div> using jQuery如何使用 jQuery 阻止 <div>
【发布时间】：2015-07-21 02:49:10
【问题描述】：

我正在寻找一些基于 jQuery 的解决方案来阻止 <div> 基于单击“开始”按钮并在单击“停止”按钮时解除阻止。我知道 jQuery blockUI 插件，但我不想使用它。我查看了问题JavaScript: How to block the whole screen while waiting for ajax response 中提供的解决方案，但它对我没有帮助（阻塞 div 没有完全隐藏我的 div）。

【问题讨论】：

“阻止一个 div”是什么意思？
您的意思是，阻止用户交互？
确切地说，应该阻止用户交互，并且应该出现一些自定义消息的阻止覆盖。
jQuery blockUI 插件有什么问题？
@A.Wolff - jQuery blockUI 插件没有任何问题，它只是避免使用第三方插件的架构方向:)。

标签： jquery jquery-blockui

【解决方案1】：

要在点击后“阻止”点击，请添加类似“prevent-click”的类。

这个类的css：

.prevent-click {
     pointer-events: none;
}

由于您提到了 jquery，您可以使用以下方法添加类：

$('button').click(function() {
     $('#div-to-be-blocked').addClass('prevent-click');
});

【讨论】：

谢谢@Jasper Seinhorst！

【解决方案2】：

在您的 div 上使用包装器，请参见下面的示例

<head>
    <style>
        #container { position: relative; height: 500px; width: 500px; }
        #wrap { 
            display: none;
            background-color: transparent;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 30;
         }
         #mydiv {
             position: relative;
             width: 100%;
             height: 100%;
             z-index: 10;
         }
    </style>
</head>
<body>
    <div id="container">
        <div id="wrap"></div>
        <div id="mydiv">
            something important
        </div>
    </div>
    <button id="start_button" >START</button>
    <button id="stop_button" >STOP</button>
    <script>
        $('#start_button').on("click", function () {
             $("#wrap").css("display", "block");
        });
        $('#stop_button').on("click", function () {
             $("#wrap").css("display", "none");
        });
   </script>
</body>

【讨论】：

这个解决方案似乎有效:)，如果我遇到任何问题，会用 jsfiddle 回复你。
我在尝试以通用格式进行这项工作时遇到问题（使用 api 启动和停止接受要被阻止的容器的“id”的繁忙指示器。我尝试了一个示例（代码在下面提供）它有 1 个具有“开始”和“停止”按钮的 div。单击“开始”时，我需要单独与该按钮关联的 div 被阻止，当单击“停止”按钮时div 应该被解锁。我发现这样做有点棘手。

【解决方案3】：

您可以创建一个单独的<div> 来覆盖您要阻止的任何内容，并使用 jQuery 正确调整大小并将其放在原始 <div> 之上。

var width = $('.container').outerWidth();
var height = $('.container').outerHeight();

$('.screen').css('width', width);
$('.screen').css('height', height);
$('.screen').css('margin-top', height * -1);

$('.screen').toggle();

$('.block-button').click(function(){
    $('.screen').toggle();
});

.container{
    display:inline-block;
    background-color:whitesmoke;
    padding:15px;
}

.screen{
    background-color:rgba(134, 134, 134, 0.69);
    width:100%;
    height:20px;
    position:absolute;
    cursor:default;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <a href="#">Don't interact with me</a><br>
        <input>
        <button onclick="alert()">Submit</button>
</div>
    
<div class="screen"></div>
    
<button class="block-button">Block</button>

【讨论】：

这是你能做的最糟糕的事情。

【解决方案4】：

我在 jsfiddle 中添加了一个解决方案，http://jsfiddle.net/responsivewebdev/vaaaqek6/41/。

    <script>
         function startBusyIndicator(containerId){   
            var container="#"+containerId;
            var containerwrap=containerId+"wrap";
            $("#container").append("<div id=\""+containerwrap+"\" class=\"wrap\"></div>");
                var location=$(container).position();
                var width = $(container).width();
                var height = $(container).height();
                 $("#"+containerwrap).css("width",width);
                 $("#"+containerwrap).css("height",height);
                 $("#"+containerwrap).css("background","Vishnu");
                 $("#"+containerwrap).css("cursor","wait");
                 $("#"+containerwrap).css("display","block");
                 $("#"+containerwrap).css("margin-top",location.top);
                 $("#"+containerwrap).css("margin-left",location.left);

        };

       function stopBusyIndicator(containerId){
        var containerwrap=containerId+"wrap";
          $("#"+containerwrap).css("display","none");
       };
    </script>
    <div id="container">
            <div id="mydiv1" style="border: 1px solid">
                I am DIV 1
            </div>
        <input type = "button" class="start_button" onclick="startBusyIndicator('mydiv1')" value ="START"/>
        <input type = "button" class="stop_button" onclick="stopBusyIndicator('mydiv1')"  value ="STOP"/>
            <br/>
            <br/>
           <div id="mydiv2" style="border: 1px solid">
                I am DIV 2
            </div>

        <input type = "button" class="start_button" onclick="startBusyIndicator('mydiv2')" value ="START"/>
        <input type = "button" class="stop_button" onclick="stopBusyIndicator('mydiv2')"  value ="STOP"/>
        <br/><br/>
        <div id="mydiv3" style="border: 1px solid">
             I am DIV 3
            </div>

        <input type = "button" class="start_button" onclick="startBusyIndicator('mydiv3')" value ="START"/>
        <input type = "button" class="stop_button" onclick="stopBusyIndicator('mydiv3')"  value ="STOP"/>
     </div>  
#container {
    position: relative; height: 50px; width: 300px; }
.wrap { 
    display: none;
    background-color: red;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

在小提琴中，您将看到三个不同的 div（div1、div2、div3），每个都有一个“开始”和“停止”按钮来启动和停止忙碌指示器（这将放置一个带有红色背景和阻止用户交互）。

【讨论】：