@substrate-system/modal NPM

modal

Modal dialog window

See smashingmagazine.com article and nathansmith/cta-modal.

demo

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="/modal.js"></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 a modal that can't be closed
            </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.

modal web component

0.0.2

5 months ago