modal not closing from sticky navbar


Topic: modal not closing from sticky navbar

rt133813 pro asked 6 years ago

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>

rt133813 pro answered 6 years ago

This link does not close the modal

https://clickforadeal.com/rickscart/cart_test.php?shop_name=Test%20Shop&latitude=47.6485811&longitude=-117.1561301

This link does

https://clickforadeal.com/rickscart/cart_test2.php?shop_name=Test%20Shop&latitude=47.6485811&longitude=-117.1561301

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


Piotr Glejzer staff answered 6 years ago

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.

Snippets

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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • 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
Tags