filaraujo / akyral-modal Goto Github PK

View Code? Open in Web Editor NEW

20.0 20.0 10.0 96 KB

A responsive dialog/modal element.

Home Page: http://filaraujo.github.io/akyral.io/modal/index.html

HTML 61.96% CSS 20.59% JavaScript 17.46%

akyral-modal's People

Contributors

Stargazers

Watchers

Forkers

whalen53 belcherj uicoded arlettemauritsz williamcodes kdamara chiefcll che-effe denineguy justinsthomas

akyral-modal's Issues

Form in modal

Does your modal support including a form?

How to open the modal?

Was just playing around with the modals and couldn't get them to work.

I tried it like so:

document.querySelector("akyral-modal").show();

And from the console I got this:

akyral-modal :: You can't interact with this element directly

Is this the intended behavour? I read the docs again and couldn't figure this out.

Can't load akyral-modal with script tag in body

If the page has a top-level script, the akyral-modal element fails to load. Suppose the page is:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/akyral-modal/akyral-modal.html">
<script>
console.log( "Hello" );
</script>
</head>

<body>
  <akyral-modal>
    Here's a modal dialog.
  </akyral-modal>
</body>

</html>

Then, when the page loads, the debugger shows an error:

Uncaught TypeError: Cannot read property 'insertBefore' of null     akyral-modal.html:153

This is in Chrome. If the <script> element is removed, the page loads without error. It appears that the timing of akyral-modal's own script can happen at a point before the document exists.

Generally speaking, it seems unfortunate for web components to inject persistent elements into the document outside their own Shadow DOM subtree. A modal dialog component like this is a special case, because the modal background has to go into the document body in order to cover everything, catch mouse/touch events, etc. But perhaps it would be cleaner if the component injected the modal background element into the body only when opening the dialog, then removing the background element from the DOM when the dialog is closed. The background element could still be preserved across dialog invocations — it would just be removed/added to the DOM when needed.

Cannot override the parent style.

I have a component who extends the akyral-modal. It has a property message who contains a code, title and the content of the message to display. I only defined a default template used when the parent property shown is true. I would like to set the overlay background in red instead of dark gray but it doesn't work. How can I do that ?

Tab key doesn't work when modal dialog is open

In Chrome:

Open the demo page http://filaraujo.github.io/akyral.io/modal/index.html.
Click the Show Modal button.
Press the Tab key.

Expected result: focus moves to the Close Modal button.
Actual result: error in console:

Uncaught TypeError: Cannot read property 'focus' of undefined     akyral-modal.html:186

Artifacts in ie10

You know what you did!

Keep modal content in body so it receives styling

akyral-modal currently moves content out of the <body>, presumably to ensure modal content stays on top. This causes modal content to lose all styling applied to the body, especially thematic choices like colors and fonts.

Possible enhancement: append the modal content to the body, but take measures to ensure its z-index is higher than any in use at the time the modal is shown. See http://quickui.org/catalog/Dialog/ for an example of this approach. (Background: QuickUI was a web component framework that predates web components, and is no longer in development.) The source for that component is CoffeeScript, and relies on several other components from that framework, but the gist is that it finds existing elements that already have z-index applied, then pick a z-index higher than those.

Error: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

I believe this is related to how the element is attached to the document:

https://github.com/filaraujo/akyral-modal/blob/master/akyral-modal-behavior.js#L58

Should close a currently open modal

Only one modal should be allowed to be open at a time.

filaraujo / akyral-modal Goto Github PK

akyral-modal's People

Contributors

Stargazers

Watchers

Forkers

akyral-modal's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs