filaraujo / akyral-modal Goto Github PK
View Code? Open in Web Editor NEWA responsive dialog/modal element.
Home Page: http://filaraujo.github.io/akyral.io/modal/index.html
A responsive dialog/modal element.
Home Page: http://filaraujo.github.io/akyral.io/modal/index.html
Does your modal support including a form?
Only one modal should be allowed to be open at a time.
In Chrome:
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
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.
When using wct
to run unit testing with the element, I've been receiving the following error:
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
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.
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.
You know what you did!
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 ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.