@default-js/defaultjs-html-modal v1.3.2

defaultjs-html-modal

• defaultjs-html-modal
• How to include?
  • npm
  • browser
• How to use?
  • Attribute: template - optional
  • Attribute: closable - optional
  • Define close action - modal-hide
• Events
• Javascript API

How to include?

npm

Install defaultjs-html-modal as a dependency into your project.

npm install @default-js/defaultjs-html-modal

Include defaultjs-html-modal into your main js-file.

import "@default-js/defaultjs-html-modal"

browser

Download the dist/browser-bundle-defaultjs-html-modal.min.js file and past the file to your js files.

Load the browser-bundle-defaultjs-html-modal.min.js file via script tag at html page.

How to use?

<d-modal>
    <!-- your content -->
</d-modal>
<d-modal template="path/to/a/template.tpl.html"></d-modal>

Attribute: template - optional

You can specify a path/url for a template, that would be loaded as content of the modal. The template would be evaluate with the default-js/defaultjs-template-language template engine.

Attribute: closable - optional

This attribute makes the modal auto closing, if you click outside the modal. If this attribute not available, then the modal can only be closed by an element of modal content with attribute modal-hide or via javascript.

Define close action - modal-hide

You can define an html element and add the attribite modal-hide. This defines for this html element, that an click event would be closed the modal. An element with the attribute modal-hide would be searched by content of the modal automaticly.

<d-modal>
    <h3>this is a modal</h3>
    <button modal-hide>cloase modal</button>
</d-modal>

Events

d-modal-event:show

d-modal-event:showing

d-modal-event:hide

d-modal-event:hiding

Javascript API

<d-modal>
    <h3>this is a modal</h3>
</d-modal>

const modal = find("d-modal").first()

modal.show(); // make the modal visible
modal.hide(); // make the modal invisible