modal
Modal dialog window
See smashingmagazine.com article and nathansmith/cta-modal.
install
npm i -S @nichoth/modal
use
bundler
Just import; this calls the global function window.customElements.define.
import '@nichoth/modal'
Then use the tag in HTML:
<modal-window>
<div slot="button">
<p>
<button class="cta-modal-toggle" type="button">
Open modal
</button>
</p>
</div>
<div slot="modal">modal content?</div>
<div slot="modal">more modal content</div>
</modal-window>
HTML only
First copy the file to a location accessible to your web server.
cp ./node_modules/@nichoth/modal/dist/index.min.js ./public/modal.js
Then link to the file in HTML
<body>
<p>...content...</p>
<script type="module" src="./index.ts"></script>
</body>
API
attributes
See nathansmith/cta-modal
Plus
closable
Take an attribute closable. If you pass in closable="false", then it will
render without a 'close' button, and escape key and clicks will not close the
modal. You would need to open/close it via your application state.
<modal-window closable="false">
<div slot="button">
<p>
<button
class="cta-modal-toggle"
type="button"
>Open modal two</button>
</p>
</div>
<div slot="modal">modal content?</div>
<div slot="modal">more modal content</div>
</modal-window>
example
See ./example.
credits
Thanks @nathansmith and Smashing Magazine for publishing this originally.
