2

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>

Improve this question
17
  • 7
    div cannot be disabled.
    – Tushar Gupta - curioustushar
    Commented Nov 22, 2013 at 13:52
  • 5
    @Govan, your best bet would be to overlay a <div> over the page body, then.
    – Frédéric Hamidi
    Commented Nov 22, 2013 at 13:54
  • 3
    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
    Commented Nov 22, 2013 at 13:55
  • 2
    Check this example @Govan jsfiddle.net/PyVjx/23 if you see the console you can't click the divs behind the mask
    – DaniP
    Commented Nov 22, 2013 at 14:11
  • 1
    @Danko I think you must post this as an answer since it is the solution of the question
    – thenewseattle
    Commented Nov 22, 2013 at 14:15

5 Answers 5

Reset to default
2

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();
});
Improve this answer
0
0

You may use css to set display none:

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

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
}
Improve this answer
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

Improve this answer
1
  • Can you elloborate this.
    – Govan
    Commented Nov 22, 2013 at 14:01
0

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.

Improve this answer
2
  • Apologies for any mistakes, on a mobile device.
    – Yoshi Walsh
    Commented Nov 22, 2013 at 14:04
  • yours too is a nice one. +1
    – Govan
    Commented Nov 22, 2013 at 14:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.