Topic: modal not closing from sticky navbar
When I click a modal link that is in a navbar with top-stick or top-fix, my modal opens, but has a grey mask and all buttons are non-responsive. So the only way to close the modal is either to refresh the page or press the browser back button. If I leave out stick-top or fixed-top, then it works fine
<nav class="navbar navbar-expand-lg navbar-dark black sticky-top">
<a class="navbar-brand" href="#" >
<form class="form-inline" >
<div class="md-form my-0" >
<input class="form-control " style="background-color:pink1;width:81%;float:left" type="text" placeholder="Search"
aria-label="Search" />
</div>
<button type="submit" class="fa fa-search" style="font-size:24px;float:left;margin-left:-30px;
color:lightskyblue;border:none;background-color: transparent" id="basic-addon2"></button>
</form>
</a>
This link does not close the modal
This link does
Line 470 is the only difference,
<nav class="navbar navbar-expand-lg navbar-dark black sticky-top " >
verses
<nav class="navbar navbar-expand-lg navbar-dark black " >
Then the modals are Deals, About and Contact. i figured you can view page source to see all my header, html, javascript and css. I use PHP for my server side script. I hope this information is helpful and thanks again for any help.
Piotr Glejzer staff commented 6 years ago
Can you check this CSS code?
.modal-backdrop{
z-index: 0;
}
or change ID of this modals examples.
Edit: I think it's a bug with position sticky. I added to our bug list that problem. My earlier comment is a temporary solution for that.
Best,
Piotr
rt133813 pro commented 6 years ago
Thank you for that fix, it worked. I had a feeling it had to do with z-index, just didn't know where. Thanks again
Hi,
may you use our snippets to show all your code with modal and navbar? It will be made easier and I will easy check and I will try to figure out what is a problem.
Best,
Piotr
rt133813 pro commented 6 years ago
Hey Piotr, I looked at the snippit module, and I don't think that will work for me as my page is dependent on another page , and all pages have php and mysql functions. So here is test link to my ssl godaddy hosted web page. The first link shows how the modal opens ok, but is greyed out and modal cant be closed. The second link shows how it does work but is not stick. Please look at the next comment from me, I am new at this , and started a new thread by mistake. I included test links and figured you could use the browser view source to see what might be going on. Thanks
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.10
- Device: all
- Browser: all
- OS: all
- Provided sample code: Yes
- Provided link: No