Div 未被禁用 [重复]答案

【问题标题】：Div is not disabled [duplicate]Div 未被禁用 [重复]
【发布时间】：2013-11-22 13:50:51
【问题描述】：

我正在使用 jquery 来弹出我点击的图像。除了禁用 div 外，一切正常。谁能帮帮我？

如果我点击它在弹出窗口中加载的任何其他图像，会发生什么。

<!DOCTYPE html>
<html>

  <head>
    <title>Own</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
        $("img").click(function(){
        $("#page").css({ opacity: 0.2});
        $('#page').prop('disabled',true);
        $("#myModal").css({ opacity: 1});
        var sr=$(this).attr('src');
        $("#mimg").attr('src',sr);
        $("#myModal").fadeIn("slow");
        });
      });
     $(document).ready(function(){
       $(".close").click(function(){
        $("#myModal").fadeOut("slow");
        $("#mimg").attr('src',"");
        $("#page").css({ opacity: 1 });
       });
      });

  </script>
 <style>
  .modal{
    width:500px;
    height:375px;
    padding:5px;
    border:1px solid #ccc;
    opacity: 0;
   -moz-box-shadow: 0 1px 3px #777;
   -webkit-box-shadow: 0 1px 3px #777;
   margin:40px auto;
  }
  .firefox {
     position:fixed;
    top:10%;
    left:20%;
  }
  .chrome {
   position:fixed;
   top:10%;
   left:60%;
 }
 .safari {
   position:fixed;
   top:50%;
   left:20%;
 }
 .ie {
   position:fixed;
   top:50%;
   left:60%;
 }
</style>
</head>

<body>
<div id="page">
  <img class="firefox" src="http://sheshtawy.files.wordpress.com/2010/05/extra-firefox.png" style="min-height:300px;height:300px;" alt="Responsive image">
  <img class="chrome" src="http://3.bp.blogspot.com/-Dp427Q47tfw/UBkAh8v4LcI/AAAAAAAAAKA/sgSqilPx6Vw/s1600/Google_Chrome.jpg" style="min-height:300px;height:300px;" alt="Responsive image">
    <img class="safari" src="http://www.tech2techsupport.com/image/safari.png" style="min-height:300px;height:300px;" alt="Responsive image">
    <img class="ie" src="http://boredcentral.com/wp-content/uploads/2013/10/Chrome.jpeg" style="min-height:300px;height:300px;" alt="Responsive image">
  </div>
  <div class="modal" id="myModal">
    <button type="button" class="close" style="position:fixed;top:5%;">&times;</button>
    <img id="mimg" src="" style="min-height:300px;height:300px;" style="position:fixed;left:10%;"="Responsive image">
</div>

【问题讨论】：

div 不能被禁用。
@Govan，你最好的办法是在页面正文上覆盖<div>。
如果你问的是灯箱逻辑，那么，只有2个div，一个用于背景，（黑色阴影与否），另一个用于显示内容，第一个div，整体覆盖页面，因此您无法单击其他项目。
检查这个例子@Govan jsfiddle.net/PyVjx/23如果你看到控制台你不能点击掩码后面的div
@Danko 我认为您必须将此作为答案发布，因为它是问题的解决方案

标签： javascript jquery html css

【解决方案1】：

在为 cmets 做了一些 aport 之后，解决方案是用 div 重叠内容。此掩码禁用对后面元素的访问，并允许您控制前面的其他信息：

演示在这里http://jsfiddle.net/PyVjx/23/。

一些提示：

重要的是，使基于position:fixed和z-index的掩码高于内容并以display:none开头使其隐藏，这是css：
```
.mask {
 display:none;
 width:100%;
 height:100%;
 position:fixed;
 top:0;
 left:0;
 z-index:10;
}
```
第二个内容越过掩码也需要position和z-index在这种情况下高于掩码。
```
.overmask {
   display:none;
   position:absolute;
   z-index:15;
}
```

然后你可以用 Jquery 显示和隐藏它：

$('.launcher').click(function () {
    $('.mask').fadeIn();
    $('.overmask').show();
});

【讨论】：

【解决方案2】：

您可以使用 css 设置不显示：

 $("#page").css({ opacity: 0.2});
$("#page").css( 'display', 'none');

【讨论】：

【解决方案3】：

您可以通过中途停留或类似以下代码来完成。单击图像后，立即将所有图像归为“禁用”类。然后在每次点击时检查这个 img 是否禁用了类 - 如果是这样 - 什么也不做。当您关闭#myModal 时，只需从所有 img 中删除“禁用”类。

$(document).ready(function(){
    $("img").click(function(){
        if(!$(this).hasClass('disable')){
          $('img').addClass('disable');
          $("#page").css({ opacity: 0.2});
          $("#myModal").css({ opacity: 1});

          var sr=$(this).attr('src');
          $("#mimg").attr('src',sr);
          $("#myModal").fadeIn("slow");
        }
    });
});

var closeMyModal = function(){
  $('img').removeClass('disable');
  //do your stuff
}

【讨论】：

【解决方案4】：

尝试使用 jquery 删除点击事件，如果需要的话，可以滚动整个正文

var event = $(document).click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    e.stopImmediatePropagation();
    return false;
});

看看这个禁用滚动

so disable scroll

【讨论】：

你能解释一下吗？

【解决方案5】：

如 cmets 中所述，div 没有 disabled 属性。在弹出窗口打开时防止点击点击页面的最可靠方法是使用如下所示的 div：

.cover {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:1; /* should be greater than any element in the page body but less than the z-index of the popup */

background: black;
opacity:0.5;         /* just for looks, dim the page behind the popup */
}

然后显示和隐藏该 div 以启用和禁用页面。

另外，一个快速的东方解决方案是应用指针事件：无； #page 的 CSS 属性，这将使所有内容都无法点击。请注意，此方法在 Internet Explorer 中不起作用。

【讨论】：

对移动设备上的任何错误表示歉意。
你的也不错。 +1