CODEWITHSUNDEEP
htmlclicktransparency
Snapper
Snapper

Reputation: 686

put transparency everything except div

I'm trying to find a way to put some transparency in everything except one div. And just to allow to click on that specific div. This probably is a easy question but I'm really out of ideas where to find the answer. I think this could be something like the modal dialog effect... but with my specific div...

Upvotes: 0

Views: 181

Answers (4)

Kyle Macey
Kyle Macey

Reputation: 8154

Because it was tagged jQuery

$('#fields input:not(#the_one_field_to_stay_active)').attr('disabled');
$('#fields textarea:not(#the_one_field_to_stay_active)').attr('disabled');
$('#fields *:not(#the_one_field_to_stay_active)').click(function() {return false});
$('#fields *:not(#the_one_field_to_stay_active)').css({opacity: 0.8});

Upvotes: 1

HandiworkNYC.com
HandiworkNYC.com

Reputation: 11114

You don't need jquery. You can do with CSS alone.

My answer here should solve your problem:

CSS suppress screen like Javascript alert

Create a div with position: fixed that is 100% height and width. Then set the background either to rbga(255,255,255,.8) or a repeating 1px square white opaque png (either with the opacity of your choice). Having a div overlay content with an opaque white background gives the same effect as lowering the actual opacity on the underlying content.

Upvotes: 1

JustBeingHelpful
JustBeingHelpful

Reputation: 18980

This is built into jQuery UI so you shouldn't need to use any extra plugins. Just include the UI file along with jQuery. And replace the word "jQuery" with a "$". Make sure the argument value you pass for the "obj" parameter is the id of your div tag. Notice we're referencing a page for "dData" so if you have to re-use this dialog, or is shared, you can re-use it. But that can be changed if you prefer to have the data defined in another way.

<script type="text/javascript" src="/scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/scripts/jquery-ui-1.8.10.custom.min.js"></script>

// dTitle - title of the modal dialog being displayed
// dWidth - width as a fraction of 1 relative to the width of the window
// dHeight - height as a fraction of 1 relative to the height of the window
// dData - the URL and query string of the page being requested within the object tag
// obj - id of <div> tag
// objType - type of object (ie: "text/html", "application/pdf", etc...)
function DisplayModalHTML(dTitle, dWidth, dHeight, dData, obj, objType) {
    var content = "<object id='jQueryObject' type='" + objType + "' data='" + dData + "' width='100%' height='100%' />";
    jQuery(obj).empty();
    jQuery(obj).attr("title", dTitle);
    jQuery(obj).html(content);
    jQuery(obj).dialog({
        autoOpen: true,
        modal: true,
        width: jQuery(window).width() * dWidth,
        height: jQuery(window).height() * dHeight,
        resizable: true,
        draggable: true,
        buttons: {

            'Close Report': function() { jQuery(this).dialog('close'); }
        }
    });

    return false;
}

Upvotes: 1

wikp
wikp

Reputation: 1203

Try jquery overlay. It should meet your needs.

Upvotes: 1

Related Questions