diff options
Diffstat (limited to 'docs/4.6/components/modal/index.html')
| -rw-r--r-- | docs/4.6/components/modal/index.html | 414 |
1 files changed, 207 insertions, 207 deletions
diff --git a/docs/4.6/components/modal/index.html b/docs/4.6/components/modal/index.html index 26956173dc..41d1763cb2 100644 --- a/docs/4.6/components/modal/index.html +++ b/docs/4.6/components/modal/index.html @@ -5,7 +5,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content."> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> -<meta name="generator" content="Hugo 0.88.1"> +<meta name="generator" content="Hugo 0.101.0"> <meta name="docsearch:language" content="en"> <meta name="docsearch:version" content="4.6"> @@ -17,7 +17,7 @@ <!-- Bootstrap core CSS --> -<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> +<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <!-- Documentation extras --> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet"> @@ -105,10 +105,10 @@ <ul class="navbar-nav ml-md-auto"> <li class="nav-item dropdown"> - <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-expanded="false"> - v4.6 - </a> - <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions"> + <button class="btn nav-link dropdown-toggle mr-md-2" data-toggle="dropdown" aria-expanded="false"> + <span class="sr-only">Bootstrap </span> v4.6 <span class="sr-only">(switch to other versions)</span> + </button> + <div class="dropdown-menu dropdown-menu-md-right"> <a class="dropdown-item active" href="/docs/4.6/">Latest (4.6.x)</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/">5.1.x</a> @@ -285,7 +285,7 @@ </div> - + <nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation"> <nav id="TableOfContents"> <ul> @@ -329,7 +329,7 @@ </ul> </nav> </nav> - + <main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between"> @@ -349,10 +349,10 @@ <li>Once again, due to <code>position: fixed</code>, there are some caveats with using modals on mobile devices. <a href="/docs/4.6/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile">See our browser support docs</a> for details.</li> <li>Due to how HTML5 defines its semantics, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus">the <code>autofocus</code> HTML attribute</a> has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:</li> </ul> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'shown.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> - <span class="nx">$</span><span class="p">(</span><span class="s1">'#myInput'</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'focus'</span><span class="p">)</span> -<span class="p">})</span> -</code></pre></div><div class="bd-callout bd-callout-info"> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'shown.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nx">$</span><span class="p">(</span><span class="s1">'#myInput'</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'focus'</span><span class="p">)</span> +</span></span><span class="line"><span class="cl"><span class="p">})</span> +</span></span></code></pre></div><div class="bd-callout bd-callout-info"> The animation effect of this component is dependent on the <code>prefers-reduced-motion</code> media query. See the <a href="/docs/4.6/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>. </div> @@ -381,26 +381,26 @@ The animation effect of this component is dependent on the <code>prefers-reduced </div> </div> </div> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-content"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-header"</span><span class="p">></span> - <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-title"</span><span class="p">></span>Modal title<span class="p"></</span><span class="nt">h5</span><span class="p">></span> - <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> - <span class="p"></</span><span class="nt">button</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">></span>Modal body text goes here.<span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-footer"</span><span class="p">></span> - <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"modal"</span><span class="p">></span>Close<span class="p"></</span><span class="nt">button</span><span class="p">></span> - <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Save changes<span class="p"></</span><span class="nt">button</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><h3 id="live-demo">Live demo</h3> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-content"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-header"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-title"</span><span class="p">></span>Modal title<span class="p"></</span><span class="nt">h5</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Modal body text goes here.<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-footer"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"modal"</span><span class="p">></span>Close<span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Save changes<span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><h3 id="live-demo">Live demo</h3> <p>Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.</p> <div class="modal fade" id="exampleModalLive" tabindex="-1" aria-labelledby="exampleModalLiveLabel" aria-hidden="true"> <div class="modal-dialog"> @@ -426,32 +426,32 @@ The animation effect of this component is dependent on the <code>prefers-reduced Launch demo modal </button> </div> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Button trigger modal --></span> -<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#exampleModal"</span><span class="p">></span> - Launch demo modal -<span class="p"></</span><span class="nt">button</span><span class="p">></span> - -<span class="c"><!-- Modal --></span> -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleModal"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"exampleModalLabel"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-content"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-header"</span><span class="p">></span> - <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleModalLabel"</span><span class="p">></span>Modal title<span class="p"></</span><span class="nt">h5</span><span class="p">></span> - <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> - <span class="p"></</span><span class="nt">button</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span> - ... - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-footer"</span><span class="p">></span> - <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"modal"</span><span class="p">></span>Close<span class="p"></</span><span class="nt">button</span><span class="p">></span> - <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Save changes<span class="p"></</span><span class="nt">button</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><h3 id="static-backdrop">Static backdrop</h3> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Button trigger modal --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#exampleModal"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Launch demo modal +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Modal --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleModal"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"exampleModalLabel"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-content"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-header"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleModalLabel"</span><span class="p">></span>Modal title<span class="p"></</span><span class="nt">h5</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> ... +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-footer"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"modal"</span><span class="p">></span>Close<span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Save changes<span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><h3 id="static-backdrop">Static backdrop</h3> <p>When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.</p> <div class="modal fade" id="staticBackdropLive" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true"> <div class="modal-dialog"> @@ -477,32 +477,32 @@ The animation effect of this component is dependent on the <code>prefers-reduced Launch static backdrop modal </button> </div> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Button trigger modal --></span> -<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#staticBackdrop"</span><span class="p">></span> - Launch static backdrop modal -<span class="p"></</span><span class="nt">button</span><span class="p">></span> - -<span class="c"><!-- Modal --></span> -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"staticBackdrop"</span> <span class="na">data-backdrop</span><span class="o">=</span><span class="s">"static"</span> <span class="na">data-keyboard</span><span class="o">=</span><span class="s">"false"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"staticBackdropLabel"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-content"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-header"</span><span class="p">></span> - <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"staticBackdropLabel"</span><span class="p">></span>Modal title<span class="p"></</span><span class="nt">h5</span><span class="p">></span> - <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> - <span class="p"></</span><span class="nt">button</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span> - ... - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-footer"</span><span class="p">></span> - <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"modal"</span><span class="p">></span>Close<span class="p"></</span><span class="nt">button</span><span class="p">></span> - <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Understood<span class="p"></</span><span class="nt">button</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><h3 id="scrolling-long-content">Scrolling long content</h3> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Button trigger modal --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#staticBackdrop"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Launch static backdrop modal +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Modal --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"staticBackdrop"</span> <span class="na">data-backdrop</span><span class="o">=</span><span class="s">"static"</span> <span class="na">data-keyboard</span><span class="o">=</span><span class="s">"false"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"staticBackdropLabel"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-content"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-header"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"staticBackdropLabel"</span><span class="p">></span>Modal title<span class="p"></</span><span class="nt">h5</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> ... +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-footer"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"modal"</span><span class="p">></span>Close<span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Understood<span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><h3 id="scrolling-long-content">Scrolling long content</h3> <p>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.</p> <div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog"> @@ -567,11 +567,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced Launch demo modal </button> </div> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Scrollable modal --></span> -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-dialog-scrollable"</span><span class="p">></span> - ... -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><h3 id="vertically-centered">Vertically centered</h3> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Scrollable modal --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-dialog-scrollable"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> ... +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><h3 id="vertically-centered">Vertically centered</h3> <p>Add <code>.modal-dialog-centered</code> to <code>.modal-dialog</code> to vertically center the modal.</p> <div class="modal fade" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> @@ -622,16 +622,16 @@ The animation effect of this component is dependent on the <code>prefers-reduced Vertically centered scrollable modal </button> </div> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Vertically centered modal --></span> -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-dialog-centered"</span><span class="p">></span> - ... -<span class="p"></</span><span class="nt">div</span><span class="p">></span> - -<span class="c"><!-- Vertically centered scrollable modal --></span> -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-dialog-centered modal-dialog-scrollable"</span><span class="p">></span> - ... -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><h3 id="tooltips-and-popovers">Tooltips and popovers</h3> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Vertically centered modal --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-dialog-centered"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> ... +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Vertically centered scrollable modal --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-dialog-centered modal-dialog-scrollable"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> ... +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><h3 id="tooltips-and-popovers">Tooltips and popovers</h3> <p><a href="/docs/4.6/components/tooltips/">Tooltips</a> and <a href="/docs/4.6/components/popovers/">popovers</a> can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.</p> <div class="modal fade" id="exampleModalPopovers" tabindex="-1" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true"> <div class="modal-dialog"> @@ -661,14 +661,14 @@ The animation effect of this component is dependent on the <code>prefers-reduced Launch demo modal </button> </div> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span> - <span class="p"><</span><span class="nt">h5</span><span class="p">></span>Popover in a modal<span class="p"></</span><span class="nt">h5</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">></span>This <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary popover-test"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Popover title"</span> <span class="na">data-content</span><span class="o">=</span><span class="s">"Popover body content is set in this attribute."</span><span class="p">></span>button<span class="p"></</span><span class="nt">a</span><span class="p">></span> triggers a popover on click.<span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"><</span><span class="nt">hr</span><span class="p">></span> - <span class="p"><</span><span class="nt">h5</span><span class="p">></span>Tooltips in a modal<span class="p"></</span><span class="nt">h5</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"tooltip-test"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Tooltip"</span><span class="p">></span>This link<span class="p"></</span><span class="nt">a</span><span class="p">></span> and <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"tooltip-test"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Tooltip"</span><span class="p">></span>that link<span class="p"></</span><span class="nt">a</span><span class="p">></span> have tooltips on hover.<span class="p"></</span><span class="nt">p</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><h3 id="using-the-grid">Using the grid</h3> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span><span class="p">></span>Popover in a modal<span class="p"></</span><span class="nt">h5</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>This <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary popover-test"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Popover title"</span> <span class="na">data-content</span><span class="o">=</span><span class="s">"Popover body content is set in this attribute."</span><span class="p">></span>button<span class="p"></</span><span class="nt">a</span><span class="p">></span> triggers a popover on click.<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">hr</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span><span class="p">></span>Tooltips in a modal<span class="p"></</span><span class="nt">h5</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"tooltip-test"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Tooltip"</span><span class="p">></span>This link<span class="p"></</span><span class="nt">a</span><span class="p">></span> and <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"tooltip-test"</span> <span class="na">title</span><span class="o">=</span><span class="s">"Tooltip"</span><span class="p">></span>that link<span class="p"></</span><span class="nt">a</span><span class="p">></span> have tooltips on hover.<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><h3 id="using-the-grid">Using the grid</h3> <p>Utilize the Bootstrap grid system within a modal by nesting <code>.container-fluid</code> within the <code>.modal-body</code>. Then, use the normal grid system classes as you would anywhere else.</p> <div class="modal fade" id="gridSystemModal" tabindex="-1" aria-labelledby="gridModalLabel" aria-hidden="true"> <div class="modal-dialog"> @@ -717,35 +717,35 @@ The animation effect of this component is dependent on the <code>prefers-reduced Launch demo modal </button> </div> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"container-fluid"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-4"</span><span class="p">></span>.col-md-4<span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-4 ml-auto"</span><span class="p">></span>.col-md-4 .ml-auto<span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-3 ml-auto"</span><span class="p">></span>.col-md-3 .ml-auto<span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-2 ml-auto"</span><span class="p">></span>.col-md-2 .ml-auto<span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-6 ml-auto"</span><span class="p">></span>.col-md-6 .ml-auto<span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span> - Level 1: .col-sm-9 - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-8 col-sm-6"</span><span class="p">></span> - Level 2: .col-8 .col-sm-6 - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-4 col-sm-6"</span><span class="p">></span> - Level 2: .col-4 .col-sm-6 - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><h3 id="varying-modal-content">Varying modal content</h3> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"container-fluid"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-4"</span><span class="p">></span>.col-md-4<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-4 ml-auto"</span><span class="p">></span>.col-md-4 .ml-auto<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-3 ml-auto"</span><span class="p">></span>.col-md-3 .ml-auto<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-2 ml-auto"</span><span class="p">></span>.col-md-2 .ml-auto<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-md-6 ml-auto"</span><span class="p">></span>.col-md-6 .ml-auto<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-sm-9"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Level 1: .col-sm-9 +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-8 col-sm-6"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Level 2: .col-8 .col-sm-6 +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-4 col-sm-6"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Level 2: .col-4 .col-sm-6 +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><h3 id="varying-modal-content">Varying modal content</h3> <p>Have a bunch of buttons that all trigger the same modal with slightly different contents? Use <code>event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">HTML <code>data-*</code> attributes</a> (possibly <a href="https://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked.</p> <p>Below is a live demo followed by example HTML and JavaScript. For more information, <a href="#events">read the modal events docs</a> for details on <code>relatedTarget</code>.</p> <div class="bd-example"> @@ -781,56 +781,56 @@ The animation effect of this component is dependent on the <code>prefers-reduced </div> </div> </div> -</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#exampleModal"</span> <span class="na">data-whatever</span><span class="o">=</span><span class="s">"@mdo"</span><span class="p">></span>Open modal for @mdo<span class="p"></</span><span class="nt">button</span><span class="p">></span> -<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#exampleModal"</span> <span class="na">data-whatever</span><span class="o">=</span><span class="s">"@fat"</span><span class="p">></span>Open modal for @fat<span class="p"></</span><span class="nt">button</span><span class="p">></span> -<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#exampleModal"</span> <span class="na">data-whatever</span><span class="o">=</span><span class="s">"@getbootstrap"</span><span class="p">></span>Open modal for @getbootstrap<span class="p"></</span><span class="nt">button</span><span class="p">></span> - -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleModal"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"exampleModalLabel"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-content"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-header"</span><span class="p">></span> - <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleModalLabel"</span><span class="p">></span>New message<span class="p"></</span><span class="nt">h5</span><span class="p">></span> - <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> - <span class="p"></</span><span class="nt">button</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span> - <span class="p"><</span><span class="nt">form</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-group"</span><span class="p">></span> - <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"recipient-name"</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-form-label"</span><span class="p">></span>Recipient:<span class="p"></</span><span class="nt">label</span><span class="p">></span> - <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control"</span> <span class="na">id</span><span class="o">=</span><span class="s">"recipient-name"</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-group"</span><span class="p">></span> - <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"message-text"</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-form-label"</span><span class="p">></span>Message:<span class="p"></</span><span class="nt">label</span><span class="p">></span> - <span class="p"><</span><span class="nt">textarea</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control"</span> <span class="na">id</span><span class="o">=</span><span class="s">"message-text"</span><span class="p">></</span><span class="nt">textarea</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"></</span><span class="nt">form</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-footer"</span><span class="p">></span> - <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"modal"</span><span class="p">></span>Close<span class="p"></</span><span class="nt">button</span><span class="p">></span> - <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Send message<span class="p"></</span><span class="nt">button</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#exampleModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'show.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> - <span class="kd">var</span> <span class="nx">button</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">relatedTarget</span><span class="p">)</span> <span class="c1">// Button that triggered the modal -</span><span class="c1"></span> <span class="kd">var</span> <span class="nx">recipient</span> <span class="o">=</span> <span class="nx">button</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s1">'whatever'</span><span class="p">)</span> <span class="c1">// Extract info from data-* attributes -</span><span class="c1"></span> <span class="c1">// If necessary, you could initiate an AJAX request here (and then do the updating in a callback). -</span><span class="c1"></span> <span class="c1">// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. -</span><span class="c1"></span> <span class="kd">var</span> <span class="nx">modal</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> - <span class="nx">modal</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.modal-title'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="s1">'New message to '</span> <span class="o">+</span> <span class="nx">recipient</span><span class="p">)</span> - <span class="nx">modal</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.modal-body input'</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="nx">recipient</span><span class="p">)</span> -<span class="p">})</span> -</code></pre></div><h3 id="change-animation">Change animation</h3> +</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#exampleModal"</span> <span class="na">data-whatever</span><span class="o">=</span><span class="s">"@mdo"</span><span class="p">></span>Open modal for @mdo<span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#exampleModal"</span> <span class="na">data-whatever</span><span class="o">=</span><span class="s">"@fat"</span><span class="p">></span>Open modal for @fat<span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#exampleModal"</span> <span class="na">data-whatever</span><span class="o">=</span><span class="s">"@getbootstrap"</span><span class="p">></span>Open modal for @getbootstrap<span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal fade"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleModal"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"exampleModalLabel"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-content"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-header"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-title"</span> <span class="na">id</span><span class="o">=</span><span class="s">"exampleModalLabel"</span><span class="p">></span>New message<span class="p"></</span><span class="nt">h5</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"close"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Close"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span><span class="ni">&times;</span><span class="p"></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">form</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-group"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"recipient-name"</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-form-label"</span><span class="p">></span>Recipient:<span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control"</span> <span class="na">id</span><span class="o">=</span><span class="s">"recipient-name"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-group"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"message-text"</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-form-label"</span><span class="p">></span>Message:<span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">textarea</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control"</span> <span class="na">id</span><span class="o">=</span><span class="s">"message-text"</span><span class="p">></</span><span class="nt">textarea</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">form</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-footer"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-dismiss</span><span class="o">=</span><span class="s">"modal"</span><span class="p">></span>Close<span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Send message<span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span></span></span></code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#exampleModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'show.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">button</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">relatedTarget</span><span class="p">)</span> <span class="c1">// Button that triggered the modal +</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">var</span> <span class="nx">recipient</span> <span class="o">=</span> <span class="nx">button</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s1">'whatever'</span><span class="p">)</span> <span class="c1">// Extract info from data-* attributes +</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// If necessary, you could initiate an AJAX request here (and then do the updating in a callback). +</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="c1">// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. +</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">var</span> <span class="nx">modal</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> +</span></span><span class="line"><span class="cl"> <span class="nx">modal</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.modal-title'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="s1">'New message to '</span> <span class="o">+</span> <span class="nx">recipient</span><span class="p">)</span> +</span></span><span class="line"><span class="cl"> <span class="nx">modal</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.modal-body input'</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="nx">recipient</span><span class="p">)</span> +</span></span><span class="line"><span class="cl"><span class="p">})</span> +</span></span></code></pre></div><h3 id="change-animation">Change animation</h3> <p>The <code>$modal-fade-transform</code> variable determines the transform state of <code>.modal-dialog</code> before the modal fade-in animation, the <code>$modal-show-transform</code> variable determines the transform of <code>.modal-dialog</code> at the end of the modal fade-in animation.</p> <p>If you want for example a zoom-in animation, you can set <code>$modal-fade-transform: scale(.8)</code>.</p> <h3 id="remove-animation">Remove animation</h3> <p>For modals that simply appear rather than fade in to view, remove the <code>.fade</code> class from your modal markup.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"..."</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> - ... -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><h3 id="dynamic-heights">Dynamic heights</h3> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"..."</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> ... +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><h3 id="dynamic-heights">Dynamic heights</h3> <p>If the height of a modal changes while it is open, you should call <code>$('#myModal').modal('handleUpdate')</code> to readjust the modal’s position in case a scrollbar appears.</p> <h3 id="accessibility">Accessibility</h3> <p>Be sure to add <code>aria-labelledby="..."</code>, referencing the modal title, to <code>.modal</code>. Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>. Note that you don’t need to add <code>role="dialog"</code> since we already add it via JavaScript.</p> @@ -875,10 +875,10 @@ The animation effect of this component is dependent on the <code>prefers-reduced <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLg">Large modal</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalSm">Small modal</button> </div> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-xl"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-lg"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-sm"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><div class="modal fade" id="exampleModalXl" tabindex="-1" aria-labelledby="exampleModalXlLabel" aria-hidden="true"> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-xl"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-lg"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"modal-dialog modal-sm"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><div class="modal fade" id="exampleModalXl" tabindex="-1" aria-labelledby="exampleModalXlLabel" aria-hidden="true"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> @@ -927,11 +927,11 @@ The animation effect of this component is dependent on the <code>prefers-reduced <p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code>.modal-open</code> to the <code><body></code> to override default scrolling behavior and generates a <code>.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p> <h3 id="via-data-attributes">Via data attributes</h3> <p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#myModal"</span><span class="p">></span>Launch modal<span class="p"></</span><span class="nt">button</span><span class="p">></span> -</code></pre></div><h3 id="via-javascript">Via JavaScript</h3> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"modal"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#myModal"</span><span class="p">></span>Launch modal<span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span></code></pre></div><h3 id="via-javascript">Via JavaScript</h3> <p>Call a modal with id <code>myModal</code> with a single line of JavaScript:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> -</code></pre></div><h3 id="options">Options</h3> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> +</span></span></code></pre></div><h3 id="options">Options</h3> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p> <table class="table table-bordered table-striped"> <thead> @@ -979,22 +979,22 @@ The animation effect of this component is dependent on the <code>prefers-reduced <h4 id="modaloptions"><code>.modal(options)</code></h4> <p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">({</span> - <span class="nx">keyboard</span><span class="o">:</span> <span class="kc">false</span> -<span class="p">})</span> -</code></pre></div><h4 id="modaltoggle"><code>.modal('toggle')</code></h4> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">({</span> +</span></span><span class="line"><span class="cl"> <span class="nx">keyboard</span><span class="o">:</span> <span class="kc">false</span> +</span></span><span class="line"><span class="cl"><span class="p">})</span> +</span></span></code></pre></div><h4 id="modaltoggle"><code>.modal('toggle')</code></h4> <p>Manually toggles a modal. <strong>Returns to the caller before the modal has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.modal</code> or <code>hidden.bs.modal</code> event occurs).</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span> -</code></pre></div><h4 id="modalshow"><code>.modal('show')</code></h4> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span> +</span></span></code></pre></div><h4 id="modalshow"><code>.modal('show')</code></h4> <p>Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code>shown.bs.modal</code> event occurs).</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> -</code></pre></div><h4 id="modalhide"><code>.modal('hide')</code></h4> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> +</span></span></code></pre></div><h4 id="modalhide"><code>.modal('hide')</code></h4> <p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code>hidden.bs.modal</code> event occurs).</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span> -</code></pre></div><h4 id="modalhandleupdate"><code>.modal('handleUpdate')</code></h4> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span> +</span></span></code></pre></div><h4 id="modalhandleupdate"><code>.modal('handleUpdate')</code></h4> <p>Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'handleUpdate'</span><span class="p">)</span> -</code></pre></div><h4 id="modaldispose"><code>.modal('dispose')</code></h4> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'handleUpdate'</span><span class="p">)</span> +</span></span></code></pre></div><h4 id="modaldispose"><code>.modal('dispose')</code></h4> <p>Destroys an element’s modal.</p> <h3 id="events">Events</h3> <p>Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <code><div class="modal"></code>).</p> @@ -1028,10 +1028,10 @@ The animation effect of this component is dependent on the <code>prefers-reduced </tr> </tbody> </table> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> - <span class="c1">// do something... -</span><span class="c1"></span><span class="p">})</span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="c1">// do something... +</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> +</span></span></code></pre></div> </main> </div> </div> @@ -1039,7 +1039,7 @@ The animation effect of this component is dependent on the <code>prefers-reduced <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script> -<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> +<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> |