-1

I have cart icon, which when clicked loads the cart of the user in a Modal. However, any link or HTML form items like input or buttons that are within this modal are unusable. It can never be brought to focus nor clicked. I tried playing with CSS property z-index with no success.

Check site here.

Add any product to cart and then click bag/cart icon on the top right to see the issue.

esafwan
  • 17,311
  • 33
  • 107
  • 166
  • 2
    They are unusable because `modal-dialog` has a CSS clause `pointer-events: none;`, it works when removed. Try wrapping the body of your modal in a `modal-content` (which provide a `pointer-events: auto;` clause) instead of `content` or just add `pointer-events: auto;` to `content` By the way, your modal is not closable –  Dec 29 '17 at 13:48
  • @BadMiscuit This solved my issue. Thanks. If you could have posted this as an answer, I could have accepted it. – esafwan Jan 04 '18 at 20:46

1 Answers1

0

Changing the pointer-events value in CSS solved the issue. wrapping the content part in an element with class modal-content is also fixing the issue as suggested in comments.

esafwan
  • 17,311
  • 33
  • 107
  • 166