Javascript Popup Responsive Example

The popup component adapts fluidly to its environment. There are times however when you would like to set the component up responsively.

Use the responsive option to configure the popup and change the options based on the viewport width. There are five predefined breakpoints:

xsmall - min-width: 0px
small - min-width: 576px
medium - min-width: 768px
large - min-width: 992px
xlarge - min-width: 1200px
use custom for setting a custom breakpoint

It is a good idea to adjust the display to tailor the UX. This allows you to have the popup bottom-positioned on mobile devices, centered on tablets, and anchored to input on larger screens to enhance the user experience.

Download and try example

Javascript jQuery Angular React Vue

                responsive: {
  xsmall: {
    display: 'bottom',
  },
  small: {
    display: 'center',
  },
  custom: { // Custom breakpoint
    breakpoint: 800,
    display: 'anchored'
  }
}

            