javascript - Div 未禁用

我正在使用 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 重叠。此掩码禁用对后面元素的访问，并允许您控制前面的其他信息:

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

一些提示:

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

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

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

关于javascript - Div 未禁用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20146500/

javascript - Div 未禁用

上一篇：html - Safari - 内容显示不正确，CSS 位置错误？

下一篇：html - 使用显示器时溢出不起作用 :table-cell