Div is not disabled

Question

I am using jquery to pop up the image I click. Everything works fine except disabling the div. Can anyone help me?

What happens in the sense If I click any other image it loads in the popup.

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

Only form controls (``, ``, `<button>`) can be reliably disabled across browsers.</button> — Frédéric Hamidi, Nov 22 '13 at 13:52
What do you mean by "disabling the div"? Div elements don't have a `disabled` property. — nnnnnn, Nov 22 '13 at 13:52
Disabled a DIV? Disabled attribute is for INPUT. Maybe you are looking for that: http://stackoverflow.com/questions/639815/how-to-disable-all-div-content — A. Wolff, Nov 22 '13 at 13:52
I want my entire page to be disabled from user to click If I am showing popup — Govan, Nov 22 '13 at 13:53
@Govan, your best bet would be to overlay a `
` over the page body, then. — Frédéric Hamidi, Nov 22 '13 at 13:54
What do you mean by 'disabling the div' ? Do you want no other images to be clickable until you've closed the current one ? — Pat Dobson, Nov 22 '13 at 13:54
if what you ask is lightbox logic, then, simply there are 2 divs, one is for background, (black shaded or not) and the other one is for displaying content, first div, overlays on whole page so you cant click to other items. — siniradam, Nov 22 '13 at 13:55
@siniradam you want me to put div for entire page for pop up? — Govan, Nov 22 '13 at 13:59
yes, a div with position:absolute or position:fixed property. when you close modal box, you can remove that div. — siniradam, Nov 22 '13 at 14:03
Check this example @Govan http://jsfiddle.net/PyVjx/23/ if you see the console you can't click the divs behind the mask — DaniP, Nov 22 '13 at 14:11
@Danko I think you must post this as an answer since it is the solution of the question — thenewseattle, Nov 22 '13 at 14:15

DaniP · Accepted Answer · 2013-11-22T14:29:03.977

Ok after some aports for the comments, the solution is to overlap the content with a div. This mask disable the access to the elements behind and allow you to control another information on the front:

The demo is here http://jsfiddle.net/PyVjx/23/.

A few tips:

One is important make the mask based on position:fixed and z-index higher than the content and begin with display:none to make it hide, here is the css:
```
.mask {
 display:none;
 width:100%;
 height:100%;
 position:fixed;
 top:0;
 left:0;
 z-index:10;
}
```
Second the content over the mask also need position and z-index in this case higher than the mask.
```
.overmask {
   display:none;
   position:absolute;
   z-index:15;
}
```

Then you can show and hide this with Jquery:

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

score 0 · Answer 2 · answered Nov 22 '13 at 13:55

0

You may use css to set display none:

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

answered Nov 22 '13 at 13:55

SaidbakR

13,303
20
101
195

Jurik · Answer 3 · 2013-11-22T13:59:15.997

You could do it with a layover or like following code. As soon as you click on an image, give all images a class 'disabled'. And then check at each click, if this img has the class disabled - if so - do nothing. And when you close your #myModal, just remove the class 'disabled' from all 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
}

score 0 · Answer 4 · edited May 23 '17 at 10:26

0

try using jquery to remove click event and if necessary scroll for the entire body if that is what you want

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

take a look at this for disabling scrolling

so disable scroll

edited May 23 '17 at 10:26

Community

1
1

answered Nov 22 '13 at 14:00

Anobik

4,841
2
17
32

Can you elloborate this. – Govan Nov 22 '13 at 14:01

score 0 · Answer 5 · answered Nov 22 '13 at 14:03

As mentioned in the comments, divs don't have a disabled property. The most reliable way to prevent clicks from hitting the page while a popup is open is to have a div that looks something like this:

.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 */
}

Then show and hide that div to enable and disable the page.

Alternatively, a quick and east solution is to apply the pointer-events: none; CSS property to #page, which will make everything unclickable. Note that this method does not work in Internet Explorer.

Apologies for any mistakes, on a mobile device. – Joshua Walsh Nov 22 '13 at 14:04 — Joshua Walsh, Nov 22 '13 at 14:04

Div is not disabled

5 Answers5