CODEWITHSUNDEEP
jquery
yetanothercoder
yetanothercoder

Reputation: 395

How to disable background using jquery?

I have button on HTML page. When I hover on it, I show a div. When I do that I need to disable the background or gray out background except the new div i have opened. When mouse/cursor moves out of this div, everything should come to normal (enable everything) and new div closes.

How do I do this?

Below is the js fiddle.

$("#mylink").hover(function() {
        $("#mydiv").show();
    });

    $("#mydiv").mouseleave(function(){
        $("#mydiv").hide();
    });

http://jsfiddle.net/ashishjmeshram/hhkvar20/

Upvotes: 1

Views: 4079

Answers (5)

Gustavo Hoirisch
Gustavo Hoirisch

Reputation: 1657

How about creating a div that spans the entire page and setting it's bg colour to something opaque? Check out this Fiddle

	$("#mylink").hover(function() {
	  $("#block").show();
	  $("#mydiv").show();
	});

	$("#mydiv").mouseleave(function() {
	  $("#mydiv").hide();
	  $("#block").hide();
	});
#block {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}
#mydiv {
  display: none;
  position: relative;
  z-index: 9;
}
#mydiv button {
  z-index: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a href="#" id="mylink">Hover to show custom div</a>

<div id="mydiv">
  <button>This is some test div.</button>
</div>
<div id="block"></div>

Upvotes: 0

michelem
michelem

Reputation: 14590

Here is a working JSFiddle

$("#mylink").hover(function() {
    $(this).css('background-color', 'gray');
    $("#mydiv").show();
});

$("#mydiv").mouseleave(function(){
    $("#mylink").css('background-color', 'white');
    $("#mydiv").hide();
});

EDIT:

If you want a modal overlay you need also a close button because you can't mouseleave the link when it has a div over it:

JSFiddle

HTML:

<div class="md-modal md-effect-1" id="modal-1">
    <div class="md-content">
        <h3>Modal Dialog</h3>
        <div>
            <p>Thsi is some test div.</p>
            <button class="md-close">Close me!</button>
        </div>
    </div>
</div>

<a href="#" id="mylink">Hover to show custom div</a>

<div class="md-overlay"></div>

JS:

$("#mylink").hover(function() {
    $(".md-modal").addClass('md-show');
});

$(".md-close").click(function(){
    $(".md-modal").removeClass('md-show');
});

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : you can change the body background color when hover the div and make it normal when remove mouse pointer.

$("#mylink").hover(function() {
        $("#mydiv").show();
        $('body').css('background-color','grey');
    },function(){
        $("#mydiv").hide();
        $('body').css('background-color','white');
});

JSFiddle Demo

Upvotes: 0

meeming
meeming

Reputation: 88

Do you need Lightbox? Like this one: https://gist.github.com/b9d9f8ef4482ca0bd352

Upvotes: 0

Huy Hoang Pham
Huy Hoang Pham

Reputation: 4147

Check the hover API of jQuery: https://api.jquery.com/hover/, found a simple answer:

    $("#mylink").hover(function() {
        $("#mydiv").show();
    }, function(){
        $("#mydiv").hide();
    });

Upvotes: 0

Related Questions