There are two ways to create a scrim in enyo: globally through enyo.scrim or through the enyo.Scrim kind.  In either case, the scrim "fades" the entire view (usually in order to show a modal dialog or a spinner).  Another use case I'm currently experimenting with in Pirate's Dice is a local scrim -- one that only fades a particular portion of the app.

[[MORE]]In my case, I'm using a scrim to disable the bid controls while other players are active.  I've tried a few different approaches (including drawers, dialogs, and hiding the controls) but a scrim seems to be a nice and simple way to handle it.

Making a scrim local is quite easy and mostly relies on a quick CSS customization.  First, create an instance of enyo.Scrim as a child of the control you wish to fade.

enyo.kind({
name:"ex.Hideable",
kind:"Control",
className:"extras-hideable",
components:[
{name:"count", content:"Click Count: 0"},
{kind:"Button", onclick:"clicked"},
{name:"scrim", kind:"Scrim"}
],
});

Notice I declared a className for the Control.  Next, I'll use that class name in css to limit the scrim to the bounds of my Hideable control.  By default, a scrim covers the screen by settings its position attribute to fixed.  To make it local, simply set the position of the parent control to relative and the scrim to absolute and you're set!

.extras-hideable {
position:relative;
}
.extras-hideable .enyo-scrim {
position:absolute;
}

Finally, to show or hide the scrim, call the appropriate method on the scrim instance.  To illustrate, here's a silly example but it get's the point across.  Clicking on the button increments the count and changes the label.  Once the scrim is active (by clicking anywhere else in the control), clicking the button is blocked by the scrim.

enyo.kind({
name:"ex.Hideable",
kind:"Control",
className:"extras-hideable",
components:[
{name:"count", content:"Click Count: 0"},
{kind:"Button", onclick:"clicked"},
{name:"scrim", kind:"Scrim"}
],
create:function() {
this.inherited(arguments);
this.showing = false;
this.count = 0;
},
toggle:function() {
this.$.scrim[this.showing ? "hide" : "show"]();
this.showing = !this.showing;
},
clicked:function(source, event) {
this.count++;
this.$.count.setContent("Click Count: " + this.count);

 event.stopPropagation();

}
});

enyo.kind({
 name:"ex.App",
 kind:"VFlexBox",
 components:[
{kind:"ex.Hideable", flex:1, onclick:"toggle"},
{kind:"ex.Hideable", flex:1, onclick:"toggle"},
{kind:"ex.Hideable", flex:1, onclick:"toggle"},
{kind:"ex.Hideable", flex:1, onclick:"toggle"}
],
lastRow:null,
toggle:function(source) {
if(source === this.lastRow) return;
if(this.lastRow) {
this.lastRow.toggle();
}
source.toggle();
this.lastRow = source;
},
});

new ex.App().renderInto(document.body);