{"componentChunkName":"component---src-templates-angulardocs-js","path":"/docs/contrast/angular/components/modal","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"611ff920-57a4-5eae-aa2c-388faca1e235","title":"Modal","slug":"/contrast/angular/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 Angular\",\n \"metaDescription\": \"Angular Bootstrap modal is lightweight, but powerful & multipurpose popup\"\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, \"Angular 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(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"\\n Modal\\n\\n\\n \\n \\n \\n Title\\n \\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. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur iste\\n officiis porro hic corrupti laborum voluptatem ratione exercitationem voluptates amet accusamus\\n accusantium rerum consequuntur deserunt vero eius, ipsa repellat. Voluptate explicabo deleniti\\n laudantium accusantium minima laborum voluptatibus ipsam sapiente quo! Aliquid aspernatur\\n facilis quos recusandae eius porro expedita minima molestias, eaque nobis omnis unde sint, alias\\n ipsa dicta non voluptatibus doloremque quod ad cumque, consequatur soluta. Vitae soluta\\n doloribus cumque iste nesciunt. Veniam eum deserunt placeat veritatis, aspernatur aperiam amet\\n exercitationem fugiat ullam voluptatem nostrum rem impedit doloremque magni voluptate sunt\\n asperiores aliquam excepturi unde ipsam possimus! Optio sapiente aut et blanditiis repellendus\\n nulla numquam voluptatem excepturi, consequuntur pariatur. Quo suscipit harum magnam excepturi\\n magni nulla, quasi eos iste. Laboriosam quisquam eaque omnis inventore at obcaecati nemo\\n possimus animi asperiores ducimus, fugiat velit, hic, molestiae numquam. Repellendus, cumque!\\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut adipisci blanditiis obcaecati\\n temporibus dolorum dignissimos officia perferendis id quis ratione delectus pariatur odio\\n repudiandae alias modi, vitae voluptatem fugiat beatae neque accusamus corrupti! A vero optio\\n totam suscipit. Delectus quaerat repellat dolores adipisci earum a at cumque cupiditate sit\\n eaque.\\n \\n
\\n
\\n \\n Label\\n \\n
\\n
\\n \\n Cancel\\n \\n \\n Done\\n \\n
\\n
\\n \\n \\n\\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(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"\\n Medium modal\\n\\n\\n \\n \\n \\n Title\\n \\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 \\n
\\n
\\n \\n Label\\n \\n
\\n
\\n \\n Cancel\\n \\n \\n Done\\n \\n
\\n
\\n \\n \\n\\n\\n Small modal\\n\\n\\n \\n \\n \\n Title\\n \\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 \\n
\\n
\\n \\n Label\\n \\n
\\n
\\n \\n Cancel\\n \\n \\n Done\\n \\n
\\n
\\n \\n \\n\\n\\n Large modal\\n\\n\\n \\n \\n Title\\n \\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 \\n
\\n
\\n \\n Label\\n \\n
\\n
\\n \\n Cancel\\n \\n \\n Done\\n \\n
\\n
\\n \\n \\n\\n\\n Fluid modal\\n\\n\\n \\n \\n Title\\n \\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 \\n