| Issue 301: | Easy way to change the overlay color and the opacity / transparency | |
| 2 people starred this issue and may be notified of changes. | Back to list |
|
I've got a simple question and i have tried to figure out how to get this done, but unfortunately without any promissing results. I know i can change the overlay color by changing the CSS. But is it also possible to set the opacity of the overlay. For now it looks like the overlay is 50% transparent. In some cases i would like to have it 10% and other cases almost 100% Is there any change to get this done by css or maybe some setting in the modal javascript? thank. Regards, Dave
Aug 17, 2009
Sorry for my late reply.
I can't find the settings to setup a notification when an answer is placed so i had
to find the issue manual.
Your tip helped my 100%
I saw the lines before in the .js but didn't know that when i changed that one, that
it effect the overlay.
I just changed the default one into:
function showBackground(elts, settings, callback) {
elts.bg.css({opacity:0}).fadeTo(500, 0.85, callback);
}
And the client is happy till this far. It's just 10% darker... but my client sees
everything i gues....
I also made a new issue about making new next/prev buttons or moving the default one.
It's a wish from the same client. Hope you can help me on this too as i am in no
position to get this done by myself.
Thanks for the opacity help!
|
||||||||
In order to change the background opacity, you'll have to rewrite the animation callback named 'showBackground' using this code: $.nyroModalSettings({ showBackground: function (elts, settings, callback) { elts.bg.css({opacity:0}).fadeTo(500, 0.5, callback); } }); }); here I'm setting it to 50% (0.5). The default is 75%. The first code will do it for every single modal. If you want to change it regarding the link, then you'll have to use your own selector and make it nyroModalable like that: $(function() { $('.myNyroModalSel').nyroModal({ showBackground: function (elts, settings, callback) { elts.bg.css({opacity:0}).fadeTo(500, 1, callback); } }); }); I hope this helped you.