Custom Z-Index
2,369 views
Skip to first unread message
FMaz
Feb 2, 2011, 9:56:41 AM2/2/11
to fancybox
Hi,
I'm facing what seem like a feature that is missing.
I know we can set the Z-Index in the CSS file, but I do use a lot of
fancyboxes on my site, and I would really like to have a better
control of the Z-index without needed to create a thousand CSS class.
Would it be possible to add a z-index option in the fancybox
function ? Is it a hard change ?
I'm actually facing the case where I have a "browse" link in a TinyMCE
light box that have a z-index of 400007 ( ! )
Again, I know I could put my fancybox at 500000+ but sometime I need a
lower value too.
After my fancybox call, I've tried to do this:
$('#fancybox-wrap').css("z-index", 500000);
The property is changed just well, but when the link is clicked and
the fancybox get displayed, the element.style content get erased and I
loose my z-index value.
I'm facing what seem like a feature that is missing.
I know we can set the Z-Index in the CSS file, but I do use a lot of
fancyboxes on my site, and I would really like to have a better
control of the Z-index without needed to create a thousand CSS class.
Would it be possible to add a z-index option in the fancybox
function ? Is it a hard change ?
I'm actually facing the case where I have a "browse" link in a TinyMCE
light box that have a z-index of 400007 ( ! )
Again, I know I could put my fancybox at 500000+ but sometime I need a
lower value too.
After my fancybox call, I've tried to do this:
$('#fancybox-wrap').css("z-index", 500000);
The property is changed just well, but when the link is clicked and
the fancybox get displayed, the element.style content get erased and I
loose my z-index value.
JFK
Feb 2, 2011, 9:13:38 PM2/2/11
to fancybox
the default fancybox z-index is 1100 set in the fancybox css file
you may override this value with an additional css declaration in your
<head> section (after the link to fancybox css file) and add the !
important declaration so your values will take precedent over any
other previous declaration
you may override this value with an additional css declaration in your
<head> section (after the link to fancybox css file) and add the !
important declaration so your values will take precedent over any
other previous declaration
David Saliba
Oct 8, 2012, 5:02:13 PM10/8/12
to fanc...@googlegroups.com
My solution :
before :
file: /var/www/html/blog/wp-content/plugins/fancy-box/jquery.fancybox.css
div#fancy_outer {
position: absolute;
top: 0;
left: 0;
z-index: 90;
padding: 20px 20px 40px 20px;
margin: 0;
background: transparent;
display: none;
}
change z-index: 90; to z-index: 90000;
so the result :
div#fancy_outer {
position: absolute;
top: 0;
left: 0;
z-index: 90000;
padding: 20px 20px 40px 20px;
margin: 0;
background: transparent;
display: none;
}
Derek Bird
Feb 11, 2017, 7:44:47 PM2/11/17
to FancyBox
Old post but in case someone is trying to get this to work with their theme, I would recommend adding this to their theme css file, opposed to editing the css of the plugin... worked fine for me... cheers
#fancybox-wrap {
- z-index: 911101 !important;
Reply all
Reply to author
Forward
0 new messages