> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/css/examples/modal-dialog.md). # modal dialog {% tabs %} {% tab title="codepen" %} {% embed url="" %} {% endtab %} {% tab title="CSS" %} ```css body { margin: 0; min-height: 200vh; /* force scrolling */ } header { background-color: #f57352; } .header-body { padding: 1em 0; margin: 0 auto; width: 80%; } /* modal dialog */ .modal { display: none; /* ⭐️ hide initially */ position: fixed; /* ⭐️ fixed */ inset: 0; /* ⭐️ obscure entire */ /* ⭐️ semi-transparent */ background-color: rgba(0, 0, 0, 0.5); } .modal-body { position: fixed; /* ⭐️ fixed */ inset: 3em 20%; width: 180px; /* ⭐️ override `right` */ padding: 2em; background-color: #eee; overflow: auto; /* ⭐️ scrollable */ } /* buttons */ button { background-color: black; color: white; padding: .4em 1em; border-radius: 6px; } button:hover { background-color: #666; } ``` {% endtab %} {% tab title="JS" %} ```javascript let modal = $('#modal'); // sign up button $('#btnSign').onclick = function(e){ e.preventDefault(); modal.style.display = 'block'; } // close modal button $('#btnClose').onclick = function(e){ e.preventDefault(); modal.style.display = 'none'; } // $ ⭐️ selector helper function $(selector, parent = document){ return parent.querySelector(selector); } ``` {% endtab %} {% tab title="HTML" %} ```markup

``` {% endtab %} {% tab title="📗 參考" %} * :green\_book: CSS in Depth, p.179 * :point\_right: [position](/web/css/layout/position.md) (CSS) {% endtab %} {% endtabs %}

Newsletter