Modal

Modal demo

Live demo Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

Modal title

Woohoo,you're reading this text in a modal!

Static backdrop

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

Modal title

I will not close if you click outside me. Don't even try to press escape key.

Scrolling long content

When modals become too long for the user’s viewport or device,they scroll independent of the page itself. Try the demo below to see what we mean.

Modal title

Cras mattis consectetur purus sit amet fermentum. Cras justo odio,dapibus ac facilisis in,egestas eget quam. Morbi leo risus,porta ac consectetur ac,vestibulum at eros.

Praesent commodo cursus magna,vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna,vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio,dapibus ac facilisis in,egestas eget quam. Morbi leo risus,porta ac consectetur ac,vestibulum at eros.

Praesent commodo cursus magna,vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna,vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio,dapibus ac facilisis in,egestas eget quam. Morbi leo risus,porta ac consectetur ac,vestibulum at eros.

Praesent commodo cursus magna,vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna,vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Scrollable modal

Vertically centered scrollable modal.

Modal title

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Toggle between modals

Toggle between multiple modals with some clever placement of the data-bs-target and data-bs-toggle attributes.

Modal 1

Show a second modal and hide this one with the button below.

Modal 2

Hide this modal and show the first with the button below.

Open first modal

Modal

Modal demo

Static backdrop

Scrolling long content

Scrollable modal

Toggle between modals

快乐8玩法精选推荐平台