modal not closing from sticky navbar

Topic: modal not closing from sticky navbar

rt133813 pro asked 5 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>

Add comment

rt133813 pro answered 5 years ago

0 0 Best answer

This link does not close the modal<a target="_blank" rel="nofollow">https://clickforadeal.com/rickscart/cart_test.php?shop_name=Test%20Shop&latitude=47.6485811&longitude=-117.1561301</a>This link does<a target="_blank" rel="nofollow">https://clickforadeal.com/rickscart/cart_test2.php?shop_name=Test%20Shop&latitude=47.6485811&longitude=-117.1561301</a>Line 470 is the only difference,<pre class="code-toolbar grey lighten-2 p-3 mb-3"><nav class="navbar navbar-expand-lg navbar-dark black sticky-top " ></pre>verses<pre class="code-toolbar grey lighten-2 p-3 mb-3"><nav class="navbar navbar-expand-lg navbar-dark black " ></pre>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.

Please insert min. 20 characters.

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 5 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 5 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

Add comment

Piotr Glejzer staff answered 5 years ago

0 0 Best answer

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 5 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. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: 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

rt133813

Pro User 79Support score
7Questions 3Answers 0Snippets