CODEWITHSUNDEEP
javascriptjqueryhtmlcssdropdown
Mei
Mei

Reputation: 61

How to focus on div and dim background

I am doing a custom dropdown, which is not necessarily a select element because of the select element's limitation.

The div should have a dropdown and once the dropdown is displayed, it should focus there and dim the background. It is not a modal, because the dropdown should stay below the other div.

For better understanding, please see the desired output here:

enter image description here

Hope you could help me on how I should do this.

Upvotes: 1

Views: 1581

Answers (1)

Shashi
Shashi

Reputation: 474

Upon click of that drop-down change opacity of other elements.

Something like:

$('.drop-down').click(function(){
    $('.other-background-div').css('opacity', '0.5');
});

Or you can also add a div with z-index on top of other elements but below the drop-down and show hide based on click.

$('.drop-down').click(function(){
    $('.new-added-div-with-color-gray').toggle();
});

Use whichever solution suits you.

Upvotes: 2

Related Questions