Warning: Use of undefined constant MDB_STRIPE_SUB_WEBHOOK_SECRET - assumed 'MDB_STRIPE_SUB_WEBHOOK_SECRET' (this will throw an Error in a future version of PHP) in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/stripe/class-mdb-stripe-webhook.php on line 26

Notice: Undefined index: HTTP_REFERER in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Modal Background Click - Material Design for Bootstrap

Modal Background Click

Topic: Modal Background Click

Paul asked 7 months ago

Expected behavior

That I can display the modal and use the rest of the site at the same time

Actual behavior

I cannot click or use anything else on the site while the modal is open (data-backdrop is false).

Is there a way to make this?

Krzysztof Wilk staff answered 7 months ago

I updated snippet (https://mdbootstrap.com/snippets/jquery/krzysztof-wilk/2040520). Just add .modal-side except these two you mentioned and everything works :)

Paul commented 7 months ago

Thank you! Now it works

Krzysztof Wilk staff answered 7 months ago


It works, but I'm afraid that it doesn't affect on every element on your page.

Look - I've made a sample page for you: https://mdbootstrap.com/snippets/jquery/krzysztof-wilk/2040520

When you launch modal, you can use NavBar to navigate between sections on the page. On the bottom you have four buttons for notifications and you can use them even if the modal is opened.

The basic functionality of page is preserved, but, for example, you can't type into inputs when modal is launched.

Modals are made to communicate the user important informations - for example discounts, new version of your products etc. You can use them to get info from user using forms too. So modals are focusing users attention and when modal is launched - work on other parts of your page shouldn't be necessary.

I think everything works correctly :) If you have more questions - just ask, I'll try to help :D

Paul answered 7 months ago

It works here just fine, but when I use modal-full-height modal-left then it doesn't work

Please insert min. 20 characters.


Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.17.0
  • Device: PC
  • Browser: Google Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No