so i have bootstrap based site with fixed navigation bar (that follow you around the page at the top) and when i want to show modal popup, it appear behind those navigation bar, how to fix?
and i using margo template from graygrids
it also appear in summernote modals for uploading picture, so it looks like all modal will appear behind those navigation bar.
To solve the problem I included in the CSS a super high z-index value (1000000) for the modal-backdrop (the shadow behind the modal), and a little bit higher one (1000001) for the modal:
.modal-backdrop {
z-index: 100000 !important;
}
.modal {
z-index: 100001 !important;
}
Hope it helps!
The navbar is fixed, meaning z-index is only relative to it's children. The simple fix is to simply increase the top margin on the outer modal container to push it down the page slightly and out from behind the navbar.
Otherwise, your modal markup has to sit in your header and you need to give it a higher z-index than the z-index of the parent navbar.
This is too late to post the answer, however I've had a similar problem today with Modal popup and a navbar.
Used javascript to set z-index of the navbar to zero when the popup is displayed and vice versa.
Note: use whateverElement.style.zIndex = 0 instead of whateverElement.style.z-index = 0 as javascript handles - as subtraction operator.
I ran into this today and came up with an alternate solution that doesn't involve modifying the CSS. If you are using MVC, you can use a section tag and render the modal in the layout (anywhere in the body). This causes the default modal behavior to work and no longer hides it behind the nav bar.
On _layout.cshtml (inside the body tag):
<body>
<!--... OTHER Layout/header code...-->
#RenderSection("modals", required: false)
</body>
and in your view:
#section modals{
#Html.Partial("_MyModal")
}
Something similar would work in other languages and most importantly doesn't require modifying the CSS.
You need to adjust the z-index in your CSS. The z-index for your navigation is higher number than everything else. So to adjust it you need to add a z-index that is higher for your modal popup. the code would look like
For example z-index: 3;
To be able to do this you have to set a position to your popup.
For example position: absolute;
After setting the position you can also adjust the position even more with putting this code in to your CSS
top: 500px; left:500px;
This means that the container you put a absolute position on is moved 500 pixels from the top and 500 pixels from the left.
If you cannot understand what z-index is. I will provide a picture for you.
z-index axis example
Related
The issue I am facing right now is that, when I have a navbar with position:sticky and I have a div with position:relative and in that another element with position:absolute then, when scrolling down, the relative div puts itself above the navbar.
I saw another thread that told the op to just use position:fixed but I really want to use sticky because the navbar is below the header and even though I could solve that by using javascript and fixed I'd rather not cause that made the navbar glitch etc. when scrolling to certain points.
Is it possible to have relative elements below sticky ones or is that just simply impossible?
While not scrolling:
While scrolling:
What I'm trying to accomplish:
Try adding z-index: 1 to the navbar and to the slideshow add margin: 40px;
I have a solution where I have to pop up a custom modal message box for my site. When the modal popup is shown, I have to set color and opacity to the complete page so that the modal popup sticks out.
I inject the below css class to the body tag to do this.
.fade_background
{
background-color: black;
opacity: 0.65;
}
It works for all elements in the page except for the elements which has a fixed position/absolute. I know that the fixed position element has the viewport as parent.
Any idea how can I target fixed position elements too.
Without viewing all elements, it is kind of hard to solve. But in basic lines, I would try to make certain that the elements are as absolute position with z-index below the overlay to highlight the modal window. It would be interesting that you publish the html and css, so I easily solve the issue.
Check to make sure that the fixed and absolute positions have the same class as the rest of them. Also try and check to see if there are any other css styles that are overwriting .fade_background
I have a set of bootstrap nav-tabs and inside these tabs are nice long information sections. Problem is that our team does not want to have all this information on such a long tab so we have made the tabs container element have an overflow: scroll property. This works great but now we are stuck with an impossibly long inline scroll section and it would take a good 30-40 mouse scrolls to get to the bottom. This will lose us site traffic.
I know that the definition of being a fixed position is being fixed relative to the browser window but I am in need of a way to use bootstrap scrollspy nav-list menu inside of the parent div and not have it able to transverse outside of that div. So we need it the same way that the class="fixed-to-top" attribute works so that is a functionable nav menu but no matter what we try it seems that the fixed positioning always reverts back to being relative to the broswer.
Is it possible to do what we are trying to do?
The code below is not a complete implementation, but I hope it gives you an idea of how it could be done. I.e. change the position property if the fixed div goes outside of its parent/container.
var $nlm = $('#navListMenu');
$(window).bind('scroll', function(){
if($nlm.offset().top < $nlm.parent().offset().top)
$nlm.css({ position:'absolute', top:0 });
else
$nlm.css({ position:'fixed'});
}
Like in Yahoo.com, when we scroll the page downwards its Search Box gets stuck to the top of the window on a particular scroll location? How to do that, Is it possible using css?
You need to have a container div for the div that will be fixed. The div that you want to show always at the top will be inside this div like this:
<div id="fixedDivWrapper">
</div id="scroll">
This stays still!
</div>
and your css:
position: fixed; /*This fixes it to the top of the div.*/
top: 20px; /*Margin at the top of the fixed div*/
A neat CSS/JavaScript solution.
You should define
position: fixed;
top: 10px;
left: 20px;
this will hang div 10px from top and 20px from left and it will stuck there during page scroll.
Also you should add some other properties you want, - maybe display: block; and other parameters.
position: fixed;
However be aware this dosnt work in IE6 or iOS Safari < 5.
Here is a very basic demo that does exactly what you want. Using jQuery to simplify tasks but this is simple enough you could make it pure JS if you wanted.
http://jsfiddle.net/sg3s/uU8Wb/
What this does is simple;
It saves some variables I will need later & never changes in variables like the offset to the top initially.
Binds an event to the scroll event of the window, in the event we do a simple check to see if the current position from the top is more or less than the offset of the element we want scrolling with the window.
If the scrolltop is more and it lacks the class it should have at that moment we assign it, css does the rest, and the other way arround when the position from the top becomes less than the original offset of our element.
Simplicity is all the magic here, if we can do both tasks with CSS but need to choose between when each state is active we simply write a script that switches a class rather than relying on JS to do it all.
I'm noticing a lot of sites are recently implementing new types of scrolling effects. Here's one example:
https://banksimple.com/
When you first start scrolling the initial section stays in place (z-index of 1?) while content scrolls over top of it. It also uses fragments and dynamically highlights it's navbar depending on what area the user has scrolled to.
I've seen a few sites use similar techniques. One (which I cannot find the link to) changes the background dynamically.
Is there a common technique used for these types of sites?
The first two sections are using position:fixed.
This fixes the items to a position on the page. They don't move, even with scrolling.
The scrolling section uses position:absolute with a high z-index.
This scrolls fine and because it has a higher z-index than the fixed position elements, it scrolls over them.
There's several ways to do this, but the easiest is to simply make a div, and use the CSS
"position:fixed;"
property. This will cause the div to stick exactly where it is, relative to the browser window.
You may also want to set you z-index to a large value so that the div is certain to stay on top of the rest of the page.
For the menu and header, it's a simple CSS solution using position: fixed and z-index. Both menu and header has position: fixed, while the menu has a large z-index value and the main content has a slightly lower one:
#menu { position: fixed; top: 0; left: 0; z-index: 2000; }
#header { position: fixed; top: ??; left: 0; }
#wrapper { z-index: 10; }
As for the fragment thing, it's done using JS. W3Fools has the same thing, done using jQuery. Perhaps you can decipher the script. Looks like it hooks to the scroll event of the document, checking if the position if the element is above the position of the viewport, taking action accordingly.
One way is to combine CSS + JavaScript let's say (jQuery)
CSS:
position:fixed for the top panel.
Use jQuery offset to detect container position and after you can can apply CSS classes for the "highlights navbar".