Notice: Function _load_textdomain_just_in_time was called <strong>incorrectly</strong>. Translation loading for the <code>wp-maximum-upload-file-size</code> domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the <code>init</code> action or later. Please see <a href="https://developer.wordpress.org/advanced-administration/debug/debug-wordpress/">Debugging in WordPress</a> for more information. (This message was added in version 6.7.0.) in /var/www/html/wp-includes/functions.php on line 6121

Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/wp-includes/functions.php:6121) in /var/www/html/wp-includes/rest-api/class-wp-rest-server.php on line 1896
{"id":393,"date":"2023-01-13T11:32:03","date_gmt":"2023-01-13T03:32:03","guid":{"rendered":"http:\/\/www.xcag.net\/?p=393"},"modified":"2023-01-13T11:35:54","modified_gmt":"2023-01-13T03:35:54","slug":"modal","status":"publish","type":"post","link":"http:\/\/www.xcag.net\/?p=393","title":{"rendered":"Modal"},"content":{"rendered":"\n<p class=\"\">Use Bootstrap\u2019s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.<\/p>\n\n\n\n<p class=\"\"><strong>On this page<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#how-it-works\">How it works<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#examples\">Examples<\/a>\n<ul class=\"wp-block-list\">\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#modal-components\">Modal components<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#live-demo\">Live demo<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#static-backdrop\">Static backdrop<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#scrolling-long-content\">Scrolling long content<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#vertically-centered\">Vertically centered<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#tooltips-and-popovers\">Tooltips and popovers<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#using-the-grid\">Using the grid<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#varying-modal-content\">Varying modal content<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#toggle-between-modals\">Toggle between modals<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#change-animation\">Change animation<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#remove-animation\">Remove animation<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#dynamic-heights\">Dynamic heights<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#accessibility\">Accessibility<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#embedding-youtube-videos\">Embedding YouTube videos<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#optional-sizes\">Optional sizes<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#fullscreen-modal\">Fullscreen Modal<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#css\">CSS<\/a>\n<ul class=\"wp-block-list\">\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#variables\">Variables<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#sass-variables\">Sass variables<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#loop\">Loop<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#usage\">Usage<\/a>\n<ul class=\"wp-block-list\">\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#via-data-attributes\">Via data attributes<\/a>\n<ul class=\"wp-block-list\">\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#toggle\">Toggle<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#dismiss\">Dismiss<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#via-javascript\">Via JavaScript<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#options\">Options<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#methods\">Methods<\/a>\n<ul class=\"wp-block-list\">\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#passing-options\">Passing options<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"\"><a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#events\">Events<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-it-works\">How it works&nbsp;<a href=\"https:\/\/v5.bootcss.com\/docs\/components\/modal\/#how-it-works\"><\/a><\/h2>\n\n\n\n<p class=\"\">Before getting started with Bootstrap\u2019s modal component, be sure to read the following as our menu options have recently changed.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Modals are built with HTML, CSS, and JavaScript. They\u2019re positioned over everything else in the document and remove scroll from the&nbsp;<code>&lt;body&gt;<\/code>&nbsp;so that modal content scrolls instead.<\/li>\n\n\n\n<li class=\"\">Clicking on the modal \u201cbackdrop\u201d will automatically close the modal.<\/li>\n\n\n\n<li class=\"\">Bootstrap only supports one modal window at a time. Nested modals aren\u2019t supported as we believe them to be poor user experiences.<\/li>\n\n\n\n<li class=\"\">Modals use&nbsp;<code>position: fixed<\/code>, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You\u2019ll likely run into issues when nesting a&nbsp;<code>.modal<\/code>&nbsp;within another fixed element.<\/li>\n\n\n\n<li class=\"\">Once again, due to&nbsp;<code>position: fixed<\/code>, there are some caveats with using modals on mobile devices.&nbsp;<a href=\"https:\/\/v5.bootcss.com\/docs\/getting-started\/browsers-devices\/#modals-and-dropdowns-on-mobile\">See our browser support docs<\/a>&nbsp;for details.<\/li>\n\n\n\n<li class=\"\">Due to how HTML5 defines its semantics,&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/input#attr-autofocus\">the&nbsp;<code>autofocus<\/code>&nbsp;HTML attribute<\/a>&nbsp;has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const myModal = document.getElementById('myModal')\nconst myInput = document.getElementById('myInput')\n\nmyModal.addEventListener('shown.bs.modal', () =&gt; {\n  myInput.focus()\n})\n<\/code><\/pre>\n\n\n\n<p class=\"\">The animation effect of this component is dependent on the&nbsp;<code>prefers-reduced-motion<\/code>&nbsp;media query. See the&nbsp;<a href=\"https:\/\/v5.bootcss.com\/docs\/getting-started\/accessibility\/#reduced-motion\">reduced motion section of our accessibility documentation<\/a>.<\/p>\n\n\n\n<p class=\"\">Keep reading for demos and usage guidelines.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use Bootstrap\u2019s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_advanced_animation_props":"{\"animations\":{\"fade-in\":{\"id\":\"fade-in\",\"name\":\"fade in\",\"keyframes\":{\"0%\":{\"transform\":{},\"opacity\":\"0%\"},\"100%\":{\"transform\":{},\"opacity\":\"100%\"}}},\"fade-in-left\":{\"id\":\"fade-in-left\",\"name\":\"fade in left\",\"keyframes\":{\"0%\":{\"transform\":{\"translateX\":\"50px\"},\"opacity\":\"0%\"},\"100%\":{\"transform\":{\"translateX\":\"0px\"},\"opacity\":\"100%\"}}},\"fade-in-right\":{\"id\":\"fade-in-right\",\"name\":\"fade in right\",\"keyframes\":{\"0%\":{\"transform\":{\"translateX\":\"-50px\"},\"opacity\":\"0%\"},\"100%\":{\"transform\":{\"translateX\":\"0px\"},\"opacity\":\"100%\"}}},\"fade-in-top\":{\"id\":\"fade-in-top\",\"name\":\"fade in top\",\"keyframes\":{\"0%\":{\"transform\":{\"translateY\":\"50px\"},\"opacity\":\"0%\"},\"100%\":{\"transform\":{\"translateY\":\"0px\"},\"opacity\":\"100%\"}}},\"fade-in-down\":{\"id\":\"fade-in-down\",\"name\":\"fade in down\",\"keyframes\":{\"0%\":{\"transform\":{\"translateY\":\"-50px\"},\"opacity\":\"0%\"},\"100%\":{\"transform\":{\"translateY\":\"0px\"},\"opacity\":\"100%\"}}},\"zoom-in\":{\"id\":\"zoom-in\",\"name\":\"zoom in\",\"keyframes\":{\"0%\":{\"transform\":{\"scale\":\"70%\"},\"opacity\":\"0%\"},\"100%\":{\"transform\":{\"scale\":\"100%\"},\"opacity\":\"100%\"}}},\"zoom-out\":{\"id\":\"zoom-out\",\"name\":\"zoom out\",\"keyframes\":{\"0%\":{\"transform\":{\"scale\":\"130%\"},\"opacity\":\"0%\"},\"100%\":{\"transform\":{\"scale\":\"100%\"},\"opacity\":\"100%\"}}},\"scale-up\":{\"id\":\"scale-up\",\"name\":\"scale up\",\"keyframes\":{\"0%\":{\"transform\":{\"scale\":\"100%\"}},\"100%\":{\"transform\":{\"scale\":\"120%\"}}}},\"scale-down\":{\"id\":\"scale-down\",\"name\":\"scale down\",\"keyframes\":{\"0%\":{\"transform\":{\"scale\":\"100%\"}},\"100%\":{\"transform\":{\"scale\":\"80%\"}}}},\"clip-from-left\":{\"id\":\"clip-from-left\",\"name\":\"reveal from left\",\"keyframes\":{\"0%\":{\"clip-path\":\"inset(0% 100% 0% 0%)\"},\"100%\":{\"clip-path\":\"inset(0% 0% 0% 0%)\"}}},\"clip-from-right\":{\"id\":\"clip-from-right\",\"name\":\"reveal from right\",\"keyframes\":{\"0%\":{\"clip-path\":\"inset(0% 0% 0% 100%)\"},\"100%\":{\"clip-path\":\"inset(0% 0% 0% 0%)\"}}},\"clip-from-top\":{\"id\":\"clip-from-top\",\"name\":\"reveal from top\",\"keyframes\":{\"0%\":{\"clip-path\":\"inset(0% 0% 100% 0%)\"},\"100%\":{\"clip-path\":\"inset(0% 0% 0% 0%)\"}}},\"clip-from-bottom\":{\"id\":\"clip-from-bottom\",\"name\":\"reveal from bottom\",\"keyframes\":{\"0%\":{\"clip-path\":\"inset(100% 0% 0% 0%)\"},\"100%\":{\"clip-path\":\"inset(0% 0% 0% 0%)\"}}},\"text-rotate-intro\":{\"id\":\"text-rotate-intro\",\"name\":\"text rotate intro\",\"keyframes\":{\"0%\":{\"transform\":{\"rotate\":\"-10deg\",\"rotateX\":\"75deg\",\"rotateY\":\"0deg\"},\"opacity\":\"0%\"},\"100%\":{\"transform\":{\"rotate\":\"0deg\",\"rotateX\":\"0deg\",\"rotateY\":\"0deg\"},\"opacity\":\"100%\"}}},\"zoom-rotate\":{\"id\":\"zoom-rotate\",\"name\":\"zoom rotate\",\"keyframes\":{\"0%\":{\"transform\":{\"rotate\":\"180deg\",\"scale\":\"50%\"},\"opacity\":\"0%\"},\"100%\":{\"transform\":{\"rotate\":\"0deg\",\"scale\":\"100%\"},\"opacity\":\"100%\"}}},\"move-up\":{\"id\":\"move-up\",\"name\":\"move up\",\"keyframes\":{\"0%\":{\"transform\":{\"translateY\":\"100%\"}},\"100%\":{\"transform\":{\"translateY\":\"0%\"}}}},\"move-down\":{\"id\":\"move-down\",\"name\":\"move down\",\"keyframes\":{\"0%\":{\"transform\":{\"translateY\":\"-100-%\"}},\"100%\":{\"transform\":{\"translateY\":\"0%\"}}}},\"video-app-intro\":{\"id\":\"video-app-intro\",\"name\":\"video app intro\",\"keyframes\":{\"0%\":{\"transform\":{\"translateX\":\"-300px\",\"scale\":\"300%\",\"rotate\":\"90deg\"}},\"50%\":{\"transform\":{\"translateX\":\"-300px\",\"scale\":\"100%\",\"rotate\":\"0deg\"}},\"100%\":{\"transform\":{\"translateX\":\"0px\",\"scale\":\"100%\",\"rotate\":\"0deg\"}}}}},\"settings\":{}}","_moveable":"{}","footnotes":""},"categories":[11],"tags":[],"class_list":["post-393","post","type-post","status-publish","format-standard","hentry","category-home_position_2"],"_links":{"self":[{"href":"http:\/\/www.xcag.net\/index.php?rest_route=\/wp\/v2\/posts\/393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.xcag.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.xcag.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.xcag.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.xcag.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=393"}],"version-history":[{"count":2,"href":"http:\/\/www.xcag.net\/index.php?rest_route=\/wp\/v2\/posts\/393\/revisions"}],"predecessor-version":[{"id":395,"href":"http:\/\/www.xcag.net\/index.php?rest_route=\/wp\/v2\/posts\/393\/revisions\/395"}],"wp:attachment":[{"href":"http:\/\/www.xcag.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.xcag.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=393"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.xcag.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}