Question

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

Answer 1

点击添加“阻止点击”等类后，点击“阻止”点击次数。

这个班级的css：

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

因为你提到了jquery，你可以使用：

添加类

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

Answer 2

您可以单独<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>

Answer 3

在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>

Answer 4

您可以使用jquery-ui。检查此链接。 https://jqueryui.com/dialog/#modal-form

Answer 5

我在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），每个div都有一个＆＃34; start＆＃34;并且＆＃34;停止＆＃34;用于启动和停止忙碌指示器的按钮（将使用红色背景覆盖并阻止用户交互）。

如何使用jQuery阻止<div>

5 个答案: