My favorites | Sign in
Project Home Downloads Issues
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
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
Status:  Fixed
Owner:  ----
Closed:  Aug 2009


 
Reported by studio25...@gmail.com, Aug 3, 2009
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 9, 2009
Project Member #1 nyro...@gmail.com
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.
Status: Fixed
Aug 17, 2009
#2 studio25...@gmail.com
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!

Powered by Google Project Hosting