Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://coreui.io/react/docs/components/modal/ below:

React Modal Component - CoreUI

Below is a static react modal component example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include react modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

React Modal body text goes here.

<CModal>
  <CModalHeader>
    <CModalTitle>React Modal title</CModalTitle>
  </CModalHeader>
  <CModalBody>
    <p>React Modal body text goes here.</p>
  </CModalBody>
  <CModalFooter>
    <CButton color="secondary">Close</CButton>
    <CButton color="primary">Save changes</CButton>
  </CModalFooter>
</CModal>

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

If you set a backdrop to static, your React modal component will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it.

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.

You can also create a scrollable react modal component that allows scroll the modal body by adding scrollable prop.

Add alignment="center to <CModal> to vertically center the React modal.

<CTooltips> and <CPopovers> can be placed within react modals as needed. When modal components are closed, any tooltips and popovers within are also automatically dismissed.

Toggle between multiple modals with some clever placement of the visible props. Please note multiple modals cannot be opened at the same time — this method simply toggles between two separate modals.

The variable $modal-fade-transform determines the transform state of React Modal component before the modal fade-in animation, whereas the variable $modal-show-transform determines the transform state of Modal component after the modal fade-in animation.

If you want a zoom-in animation, for example, set $modal-fade-transform: scale(.8).

For modals that simply appear rather than fade into view, set transition to false.

<CModal transition={false}>...</CModal>

Be sure to add aria-labelledby="...", referencing the modal title, to <CModal /> Additionally, you may give a description of your modal dialog with aria-describedby on <CModal>. Note that you don’t need to add role="dialog, aria-hidden="true", and aria-modal="true" since we already add it.

Modals have three optional sizes, available via modifier classes to be placed on a <CModal>. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

Another override is the option to pop up a React modal component that covers the user viewport, available via property fullscrean.

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

• <CModal />
• <CModalBody />
• <CModalFooter />
• <CModalHeader />
• <CModalTitle />

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4