Blocking modal/interstitial display

Consent Pro
1

Description

  1. Does Consent Pro support a blocking modal/interstitial display (page inert until a choice is made), as opposed to our current dismissible corner banner? (Some tools call this “forced consent” or “interstitial mode.”)

Site URL

NDA Notice: If you’re under an NDA, please feel free to send us a Direct Message/Email with the above information

2

Hey @kbanker! :flexed_biceps:

Consent Pro doesn’t have a built-in blocking modal mode — the banner types (opt-in, opt-out, do not sell, informational) are all designed as dismissible notices rather than page-blocking overlays. But since it’s built natively in Webflow, you can absolutely get there with custom CSS.

The general approach is to style the fs-consent_component wrapper itself as the full-screen overlay. A few things to wire up:

  1. Apply position: fixed with inset: 0 to cover the entire viewport
  2. Add a high z-index so it sits above all other content
  3. Add a semi-transparent backdrop behind the banner content
  4. Optionally set pointer-events: none on the body until consent is given, with pointer-events: auto on the banner itself

One hard requirement here — your consent elements must stay inside the fs-consent_component wrapper for Consent Pro to function properly. So you’ll want to target that wrapper for the overlay styling rather than creating a separate element.

If you need programmatic control over visibility, Consent Pro’s JS API gives you elements.banner.show() and elements.banner.hide() methods you can hook into based on consent state.

On the GDPR side, just make sure your Reject and Accept buttons stay clearly accessible — visitors shouldn’t have to accept to proceed. That’s already how your opt-in banner works, so you’d just be extending that pattern visually.

Since you already have opt-in, opt-out, and don’t-sell instances configured, the CSS changes would essentially restyle those existing elements into a centered modal with a backdrop.

Happy to dig into more specific CSS if you share what you’ve tried so far! :folded_hands: