# Blocking modal/interstitial display

**URL:** <https://forum.finsweet.com/t/blocking-modal-interstitial-display/7594>\
**Category:** Consent Pro\
**Tags:** consent-pro-v2\
**Created:** [October 15, 2026, 8:40pm UTC](https://forum.finsweet.com/t/blocking-modal-interstitial-display/7594 "2026-10-15T20:40:51Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kbanker](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/kbanker/32/6597_2.png) [@kbanker](https://forum.finsweet.com/u/kbanker)\
**Post date:** [October 15, 2026, 8:40pm UTC](https://forum.finsweet.com/t/blocking-modal-interstitial-display/7594/1 "2026-10-15T20:40:51Z")

</div>

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

> **[B2B Payments Solution - Unified Payments Platform for Business - ConnexPay](https://www.connexpay.com/)**
>
> Complete B2B payments solution unifying customer payments and supplier payouts. Our payments platform reduces costs by 50%, accelerates cash flow, and automates reconciliation.

## 

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

---

<div class="post-metadata">

**Author:** ![Support-Finn](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-finn/32/5169_2.png) [@Support-Finn](https://forum.finsweet.com/u/Support-Finn)\
**Post date:** [October 16, 2026, 1:58pm UTC](https://forum.finsweet.com/t/blocking-modal-interstitial-display/7594/2 "2026-10-16T13:58:40Z")

</div>

Hey @kbanker! 💪

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! 🙏