{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/components/modal","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"36a58a7b-91f4-5d3f-8759-1ad3276c72e7","title":"Modal","slug":"/contrast/react/components/modal"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Modal\",\n  \"metaTitle\": \"Modal Component for Contrast Bootstrap React\",\n  \"metaDescription\": \"Building a Modal Component using the Contrast Bootstrap React Package\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Modal\"), mdx(\"p\", null, \"React Bootstrap modal is lightweight, but powerful & multipurpose popup. Learn how to manipulate size, styles & position. Multiple examples and detailed tutorial.\"), mdx(\"p\", null, \"The Modal is a dialog box/popup window which can be used for light boxes, user notifications, UI enhancements, e-commerce components and many other cases.\"), mdx(\"p\", null, \"It's easily customized. You can manipulate size, position, and content.\"), mdx(\"h2\", null, \"Custom Modal\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/z99wzWH.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBModal, CDBCardImage, CDBCardBody, CDBCardTitle, CDBCardText, CDBCard, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Modal = () => {\\n  const [state, setState] = useState({\\n    modal1: false,\\n    modal2: false,\\n    modal3: false,\\n    modal4: false,\\n    modal5: false,\\n    modal6: false,\\n    modal7: false,\\n    modal8: false,\\n    modal9: false,\\n  });\\n  const toggle = (nr) => () => {\\n    let modalNumber = \\\"modal\\\" + nr;\\n    setState({\\n      ...state,\\n      [modalNumber]: !state[modalNumber],\\n    });\\n  };\\n  return (\\n    <CDBContainer>\\n          <CDBBtn onClick={toggle(1)} color=\\\"dark\\\">\\n            Modal\\n          </CDBBtn>\\n          <CDBModal isOpen={state.modal1} toggle={toggle(1)} centered fade>\\n            <CDBCard>\\n              <CDBCardImage className=\\\"img-fluid\\\" src=\\\"img/modal.jpg\\\" />\\n              <CDBCardBody>\\n                <CDBCardTitle>Title</CDBCardTitle>\\n                <CDBCardText>\\n                  Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla\\n                  orcane faucibus ex, non facilisis nisl. Maexenas aliquet\\n                  mauris ut tempus.\\n                </CDBCardText>\\n                <div className=\\\"d-flex\\\">\\n                  <div\\n                    className=\\\"d-flex justify-content-start\\\"\\n                    style={{ flex: \\\" 50%\\\" }}\\n                  >\\n                    <CDBBtn color=\\\"light\\\" flat>\\n                      Label\\n                    </CDBBtn>\\n                  </div>\\n                  <div\\n                    className=\\\"d-flex justify-content-end\\\"\\n                    style={{ flex: \\\" 50%\\\" }}\\n                  >\\n                    <CDBBtn color=\\\"white\\\" flat onClick={toggle(1)}>\\n                      Cancel\\n                    </CDBBtn>\\n                    <CDBBtn color=\\\"dark\\\" flat>\\n                      Done\\n                    </CDBBtn>\\n                  </div>\\n                </div>\\n              </CDBCardBody>\\n            </CDBCard>\\n          </CDBModal>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Modal;\\n\")), mdx(\"h2\", null, \"Modal Sizes\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/h8y6UlS.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBModal, CDBCardImage, CDBCardBody, CDBCardTitle, CDBCardText, CDBCard, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Modal = () => {\\n  const [state, setState] = useState({\\n    modal1: false,\\n    modal2: false,\\n    modal3: false,\\n    modal4: false,\\n    modal5: false,\\n    modal6: false,\\n    modal7: false,\\n    modal8: false,\\n    modal9: false,\\n  });\\n  const toggle = (nr) => () => {\\n    let modalNumber = \\\"modal\\\" + nr;\\n    setState({\\n      ...state,\\n      [modalNumber]: !state[modalNumber],\\n    });\\n  };\\n  return (\\n    <CDBContainer>\\n            <CDBBtn color=\\\"light\\\" flat onClick={toggle(2)}>\\n              Medium modal\\n            </CDBBtn>\\n            <CDBModal isOpen={state.modal2} toggle={toggle(2)}>\\n              <CDBCard border>\\n                <CDBCardImage className=\\\"img-fluid\\\" src=\\\"img/modal.jpg\\\" />\\n                <CDBCardBody>\\n                  <CDBCardTitle>Title</CDBCardTitle>\\n                  <CDBCardText>\\n                    Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla\\n                    orcane faucibus ex, non facilisis nisl. Maexenas aliquet\\n                    mauris ut tempus.\\n                  </CDBCardText>\\n                  <div className=\\\"d-flex\\\">\\n                    <div\\n                      className=\\\"d-flex justify-content-start\\\"\\n                      style={{ flex: \\\" 50%\\\" }}\\n                    >\\n                      <CDBBtn color=\\\"light\\\" flat>\\n                        Label\\n                      </CDBBtn>\\n                    </div>\\n                    <div\\n                      className=\\\"d-flex justify-content-end\\\"\\n                      style={{ flex: \\\" 50%\\\" }}\\n                    >\\n                      <CDBBtn color=\\\"white\\\" flat onClick={toggle(2)}>\\n                        Cancel\\n                      </CDBBtn>\\n                      <CDBBtn color=\\\"dark\\\" flat>\\n                        Done\\n                      </CDBBtn>\\n                    </div>\\n                  </div>\\n                </CDBCardBody>\\n              </CDBCard>\\n            </CDBModal>\\n            <CDBBtn color=\\\"light\\\" flat onClick={toggle(3)}>\\n              Small modal\\n            </CDBBtn>\\n            <CDBModal isOpen={state.modal3} toggle={toggle(3)} size=\\\"sm\\\">\\n              <CDBCard>\\n                <CDBCardImage className=\\\"img-fluid\\\" src=\\\"img/modal.jpg\\\" />\\n                <CDBCardBody>\\n                  <CDBCardTitle>Title</CDBCardTitle>\\n                  <CDBCardText>\\n                    Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla\\n                    orcane faucibus ex, non facilisis nisl. Maexenas aliquet\\n                    mauris ut tempus.\\n                  </CDBCardText>\\n                  <div className=\\\"d-flex\\\">\\n                    <div\\n                      className=\\\"d-flex justify-content-start\\\"\\n                      style={{ flex: \\\" 50%\\\" }}\\n                    >\\n                      <CDBBtn color=\\\"light\\\" flat>\\n                        Label\\n                      </CDBBtn>\\n                    </div>\\n                    <div\\n                      className=\\\"d-flex justify-content-end\\\"\\n                      style={{ flex: \\\" 50%\\\" }}\\n                    >\\n                      <CDBBtn color=\\\"white\\\" flat onClick={toggle(3)}>\\n                        Cancel\\n                      </CDBBtn>\\n                      <CDBBtn color=\\\"dark\\\" flat>\\n                        Done\\n                      </CDBBtn>\\n                    </div>\\n                  </div>\\n                </CDBCardBody>\\n              </CDBCard>\\n            </CDBModal>\\n            <CDBBtn color=\\\"light\\\" flat onClick={toggle(4)}>\\n              Large modal\\n            </CDBBtn>\\n            <CDBModal isOpen={state.modal4} toggle={toggle(4)} size=\\\"lg\\\">\\n              <CDBCard border>\\n                <CDBCardBody>\\n                  <CDBCardTitle>Title</CDBCardTitle>\\n                  <CDBCardText>\\n                    Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla\\n                    orcane faucibus ex, non facilisis nisl. Maexenas aliquet\\n                    mauris ut tempus.\\n                  </CDBCardText>\\n                  <div className=\\\"d-flex\\\">\\n                    <div\\n                      className=\\\"d-flex justify-content-start\\\"\\n                      style={{ flex: \\\" 50%\\\" }}\\n                    >\\n                      <CDBBtn color=\\\"light\\\" flat>\\n                        Label\\n                      </CDBBtn>\\n                    </div>\\n                    <div\\n                      className=\\\"d-flex justify-content-end\\\"\\n                      style={{ flex: \\\" 50%\\\" }}\\n                    >\\n                      <CDBBtn color=\\\"white\\\" flat onClick={toggle(4)}>\\n                        Cancel\\n                      </CDBBtn>\\n                      <CDBBtn color=\\\"dark\\\" flat>\\n                        Done\\n                      </CDBBtn>\\n                    </div>\\n                  </div>\\n                </CDBCardBody>\\n              </CDBCard>\\n            </CDBModal>\\n            <CDBBtn color=\\\"light\\\" flat onClick={toggle(5)}>\\n              Fluid modal\\n            </CDBBtn>\\n            <CDBModal isOpen={state.modal5} toggle={toggle(5)} size=\\\"fluid\\\">\\n              <CDBCard border>\\n                <CDBCardBody>\\n                  <CDBCardTitle>Title</CDBCardTitle>\\n                  <CDBCardText>\\n                    Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla\\n                    orcane faucibus ex, non facilisis nisl. Maexenas aliquet\\n                    mauris ut tempus.\\n                  </CDBCardText>\\n                  <div className=\\\"d-flex\\\">\\n                    <div\\n                      className=\\\"d-flex justify-content-start\\\"\\n                      style={{ flex: \\\" 50%\\\" }}\\n                    >\\n                      <CDBBtn color=\\\"light\\\" flat>\\n                        Label\\n                      </CDBBtn>\\n                    </div>\\n                    <div\\n                      className=\\\"d-flex justify-content-end\\\"\\n                      style={{ flex: \\\" 50%\\\" }}\\n                    >\\n                      <CDBBtn color=\\\"white\\\" flat onClick={toggle(5)}>\\n                        Cancel\\n                      </CDBBtn>\\n                      <CDBBtn color=\\\"dark\\\" flat>\\n                        Done\\n                      </CDBBtn>\\n                    </div>\\n                  </div>\\n                </CDBCardBody>\\n              </CDBCard>\\n            </CDBModal>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Modal;\\n\")), mdx(\"h2\", null, \"Modal Positions\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/sT4ZwEV.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBModal, CDBModalHeader, CDBModalBody, CDBModalFooter, CDBCardImage, CDBCardBody, CDBCardTitle, CDBCardText, CDBCard, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n  const [state, setState] = useState({\\n    modal1: false,\\n    modal2: false,\\n    modal3: false,\\n    modal4: false,\\n    modal5: false,\\n    modal6: false,\\n    modal7: false,\\n    modal8: false,\\n    modal9: false,\\n  });\\n  const toggle = (nr) => () => {\\n    let modalNumber = \\\"modal\\\" + nr;\\n    setState({\\n      ...state,\\n      [modalNumber]: !state[modalNumber],\\n    });\\n  };\\n\\nconst Modal = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtn color=\\\"dark\\\" flat onClick={toggle(6)}>\\n            Top right\\n          </CDBBtn>\\n          <CDBModal\\n            isOpen={state.modal6}\\n            toggle={toggle(6)}\\n            side\\n            position=\\\"top-right\\\"\\n          >\\n            <CDBModalHeader toggle={toggle(6)}>Title</CDBModalHeader>\\n            <CDBModalBody>\\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\\n              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\\n              enim ad minim veniam, quis nostrud exercitation ullamco laboris\\n              nisi ut aliquip ex ea commodo consequat.\\n            </CDBModalBody>\\n            <CDBModalFooter>\\n              <CDBBtn color=\\\"dark\\\" flat onClick={toggle(6)}>\\n                Close\\n              </CDBBtn>\\n              <CDBBtn color=\\\"light\\\" flat>\\n                Save changes\\n              </CDBBtn>\\n            </CDBModalFooter>\\n          </CDBModal>\\n          <CDBBtn color=\\\"dark\\\" flat onClick={toggle(7)}>\\n            Bottom left\\n          </CDBBtn>\\n          <CDBModal\\n            isOpen={state.modal7}\\n            toggle={toggle(7)}\\n            side\\n            position=\\\"bottom-left\\\"\\n          >\\n            <CDBModalHeader toggle={toggle(7)}>Title</CDBModalHeader>\\n            <CDBModalBody>\\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\\n              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\\n              enim ad minim veniam, quis nostrud exercitation ullamco laboris\\n              nisi ut aliquip ex ea commodo consequat.\\n            </CDBModalBody>\\n            <CDBModalFooter>\\n              <CDBBtn color=\\\"dark\\\" flat onClick={toggle(7)}>\\n                Close\\n              </CDBBtn>\\n              <CDBBtn color=\\\"light\\\" flat>\\n                Save changes\\n              </CDBBtn>\\n            </CDBModalFooter>\\n          </CDBModal>\\n          <CDBBtn color=\\\"dark\\\" flat onClick={toggle(8)}>\\n            Top Left\\n          </CDBBtn>\\n          <CDBModal\\n            isOpen={state.modal8}\\n            toggle={toggle(8)}\\n            side\\n            position=\\\"top-left\\\"\\n          >\\n            <CDBModalHeader toggle={toggle(8)}>Title</CDBModalHeader>\\n            <CDBModalBody>\\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\\n              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\\n              enim ad minim veniam, quis nostrud exercitation ullamco laboris\\n              nisi ut aliquip ex ea commodo consequat.\\n            </CDBModalBody>\\n            <CDBModalFooter>\\n              <CDBBtn color=\\\"dark\\\" flat onClick={toggle(8)}>\\n                Close\\n              </CDBBtn>\\n              <CDBBtn color=\\\"light\\\" flat>\\n                Save changes\\n              </CDBBtn>\\n            </CDBModalFooter>\\n          </CDBModal>\\n          <CDBBtn color=\\\"light\\\" flat onClick={toggle(9)}>\\n            Bottom right\\n          </CDBBtn>\\n          <CDBModal\\n            isOpen={state.modal9}\\n            toggle={toggle(9)}\\n            side\\n            position=\\\"bottom-right\\\"\\n          >\\n            <CDBModalHeader toggle={toggle(9)}>Title</CDBModalHeader>\\n            <CDBModalBody>\\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\\n              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\\n              enim ad minim veniam, quis nostrud exercitation ullamco laboris\\n              nisi ut aliquip ex ea commodo consequat.\\n            </CDBModalBody>\\n            <CDBModalFooter>\\n              <CDBBtn color=\\\"dark\\\" onClick={toggle(6)}>\\n                Close\\n              </CDBBtn>\\n              <CDBBtn color=\\\"light\\\" flat>\\n                Save changes\\n              </CDBBtn>\\n            </CDBModalFooter>\\n          </CDBModal>\\n          <CDBBtn color=\\\"light\\\" flat onClick={toggle(9)}>\\n            Center\\n          </CDBBtn>\\n          <CDBModal isOpen={state.modal9} toggle={toggle(9)} side>\\n            <CDBModalHeader toggle={toggle(9)}>Title</CDBModalHeader>\\n            <CDBModalBody>\\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\\n              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\\n              enim ad minim veniam, quis nostrud exercitation ullamco laboris\\n              nisi ut aliquip ex ea commodo consequat.\\n            </CDBModalBody>\\n            <CDBModalFooter>\\n              <CDBBtn color=\\\"dark\\\" onClick={toggle(6)}>\\n                Close\\n              </CDBBtn>\\n              <CDBBtn color=\\\"light\\\" flat>\\n                Save changes\\n              </CDBBtn>\\n            </CDBModalFooter>\\n          </CDBModal>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Modal;\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about the Modal component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.\"), mdx(\"h2\", null, \"Contrast Modal Import Statement\"), mdx(\"p\", null, \"You need to import the Contrast Modal component first before using it.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import { CDBModal, CDBModalHeader, CDBModalBody, CDBModalFooter } from \\\"cdbreact\\\";\\n\")), mdx(\"p\", null, \"API Reference: Contrast Modal Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBModal component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom modal-content classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal className=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"wrapperClassName\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom class to wrapper container\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal wrapperClassName=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"modalClassName\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom modal-dialog element\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal modalClassName=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"contentClassName\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom modal-content classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal contentClassName=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"backdropClassName\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom class to modal-backdrop element\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal backdropClassName=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"disableBackdrop\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Disable backdrop if this prop is true.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal disableBackdrop .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"animation\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes direction of animation. Choose from \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"top\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal animation=\\\"bottom\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"autoFocus\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"true\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Defines if modal should receive focus\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal autoFocus={false} .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"backdrop\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"true\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"If false, the backdrop is not rendered.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal backdrop={false} .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"cascading\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds cascading-class to modal-dialog element\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal cascading .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"centered\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Add custom class to modal-dialog element\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal centered .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"disableFocusTrap\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"true\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"If true, removes focus trap effect.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal disableFocusTrap={false} .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"fade\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"true\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Removes transition\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal fade={false} .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"frame\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes the position of the modal. It has to be used along with position prop equal to \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"top\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal frame position=\\\"bottom\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"fullHeight\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes the position of the modal. It has to be used along with position prop equal to \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"top\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal fullHeight position=\\\"bottom\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"isOpen\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"true\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"If true, removes focus trap effect.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal isOpen={Modal} .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"keyboard\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"true\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Closes the modal when the escape key is pressed.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal keyboard={false} .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"labelledBy\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes aria-labelledby attribute\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal labelledBy=\\\"myLabel\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"modalStyle\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Predefines modal style. Choose one of success / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"info\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"danger\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"warning\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal modalStyle=\\\"warning\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"position\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes the position of the modal\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal position=\\\"top-right\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"side\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes the position of the modal. It has to be used along with position prop equal to \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom-right\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom-left\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"top-right\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"top-left\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal side position=\\\"bottom-left\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"size\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes the size of the modal. Choose from \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"sm\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"lg\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"fluid\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal size=\\\"fluid\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"toggle\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"function\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Defines function which fires on close/open event\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal toggle={myFunction} ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"hiddenModal\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"function\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"This event is fired after the modal is closed.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal hiddenModal={myFunction} ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"hideModal\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"function\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"This event is fired just before the modal is hidden.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal hideModal={myFunction} ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"showModal\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"function\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"This event is fired just before the modal is open.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModal showModal={myFunction} ... />\")))), mdx(\"p\", null, \"API Reference: Contrast Modal Body Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBModalBody component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom class ModalBody component\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModalBody className=\\\"myClass\\\" ... />\")))), mdx(\"p\", null, \"API Reference: Contrast Modal Footer Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBModalFooter component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom class ModalFooter component\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModalFooter className=\\\"myClass\\\" ... />\")))), mdx(\"p\", null, \"API Reference: Contrast Modal Header Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBModalHeader component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom class ModalHeader component\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModalHeader className=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"titleClass\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom class to title element.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModalHeader titleClass=\\\"myTitleClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"closeArialLabel\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Close\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Defines custom label for close button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModalHeader closeArialLabel=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"toggle\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"function\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Defines function which fires on close/open event\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModalHeader toggle={myFunction} ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"h4\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Defines custom tag for ModalHeader\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBModalHeader tag=\\\"h2\\\" ... />\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#modal","title":"Modal","items":[{"url":"#custom-modal","title":"Custom Modal"},{"url":"#modal-sizes","title":"Modal Sizes"},{"url":"#modal-positions","title":"Modal Positions"}]},{"url":"#api","title":"API","items":[{"url":"#contrast-modal-import-statement","title":"Contrast Modal Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/components/modal.mdx"},"frontmatter":{"metaTitle":"Modal Component for Contrast Bootstrap React","metaDescription":"Building a Modal Component using the Contrast Bootstrap React Package"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"36a58a7b-91f4-5d3f-8759-1ad3276c72e7"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}