Question

我正在使用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>

Answer 1

在对评论进行了一些意见之后，解决方法是将内容与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();
});

Answer 2

您可以使用css设置display none：

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

Answer 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
}

Answer 4

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

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

看看这个用于禁用滚动

so disable scroll

Answer 5

如评论中所述，div没有禁用属性。在弹出窗口打开时防止点击进入页面的最可靠方法是使用如下所示的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以启用和禁用该页面。

或者，快速和东方解决方案是应用指针事件：无; CSS属性为#page，这将使一切都无法点击。请注意，此方法在Internet Explorer中不起作用。

Div未被禁用

5 个答案: