Partial overlay with Control.Modal

22 views
Skip to first unread message

Jisse Reitsma

unread,
May 23, 2012, 10:28:57 AM5/23/12
to LivePipe UI Users
Hi,

I try to create a Control.Modal effect where actually the modal
overlay only covers part of the body. It should be an overlay of the
element "div#mydiv" instead of "body". However, no matter what I try,
it keeps inserting the "div#control_overlay" element as child of
"body". Ofcourse I can create ugly workarounds using CSS, but those
tricks will still not do what I want. I've also scanned the window.js
file to see where the body-element is picked for insertion, but
changing that into my own element (core hack) does not work either.

Does anybody know whether there is a solution for this?

Thanks,
Jisse Reitsma

Walter Lee Davis

unread,
May 23, 2012, 10:57:07 AM5/23/12
to livepipe...@googlegroups.com
Maybe here's another way to attack this. I'm not using CM in this example, but I'm just rolling my own overlay with new Element:

$$('.coverme').invoke('observe','click', function(evt){
var elm = this;
var overlay = new Element('div', {'class': 'overlay'}).clonePosition(elm);
$('PageDiv').insert(overlay);
overlay.observe('click', function(evt){ this.stopObserving().remove(); });
});

.overlay {
background-color: rgba(0,0,0,0.7);
position: absolute;
z-index: 100;
}

Maybe you could use a similar trick to insert the overlay into the page using CM, then warp it into the proper shape/position with clonePosition (Prototype core function).

Walter

>
> --
> You received this message because you are subscribed to the Google Groups "LivePipe UI Users" group.
> To post to this group, send email to livepipe...@googlegroups.com.
> To unsubscribe from this group, send email to livepipe-ui-us...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/livepipe-ui-users?hl=en.
>

Reply all
Reply to author
Forward
0 new messages