Comments (11)
Hi @txchen ! I'm happy to hear you like MUI. Apologies for the late reply - the past couple of days have been very busy.
There's actually already a hidden implementation but we're still debating on whether or not it belongs in the core library. Currently you can use it like this:
// create modal dialog element
var modalEl = document.createElement('div');
div.style.position = "absolute";
div.style.top = "100px";
div.style.width = "500px";
div.style.margin = "0 auto";
// turn on overlay
var overlayEl = mui.overlay('on');
// append dialog to overlay
overlayEl.appendChild(modalEl);
Let me know what you think...
from mui.
@amorey Thanks! I will have a try.
I actually love to see that it is included in the library. One of the reason I like MUI is because it is much smaller than bootstrap, if its features can cover most of the scenarios, I think it will be perfect, and modar dialog, IMO, is one of them.
Otherwise, I have to find another smaller lib to do the dialog, and you know, that's not easy, most of them uses jQuery:(
Also, it would be great if menu is implemented.
Besides, I think http://purecss.io/ 's module structure is quite cool, you get what you want and keep the lib very small.
from mui.
Great! Pure looks very interesting. I'll take a closer look and see what we can learn from their implementation.
from mui.
@txchen What do you think about this spec for the modal dialog:
var options = {
keyboard: true, // if true teardown if escape key is pressed (default: true)
static: false // if true teardown if backdrop is clicked (default: false)
};
var modalEl = document.createElement('div');
div.style.position = 'absolute';
div.style.top = '100px';
var overlayEl = mui.overlay('on', options, modalEl);
from mui.
@amorey I like it! it's better than the previous version.
Another question: if I have a pre-defined dom element to represent the dialog, and set the display to none or hidden, so it is not showing. Is it ok to let mui operate it and make it show? Manual create the dialog might need more code, than using some library like riotjs or react.
from mui.
Great! Sounds like we're headed in the right direction.
If the pre-defined DOM element is hidden then it will stay hidden when you add it to the overlay. MUI will only append 'modalEl' to 'overlayEl' and you have to set the display property yourself.
Manually creating the element should only add another 2 lines of code but it gives the developer full control over the modal:
var modalEl = document.createElement('div');
modalEl.className = 'my-modal-wrapper';
Let me know your thoughts...
from mui.
@amorey I tried this hidden feature today, it works, thanks!
However, I still feel to manually create the dom and add it to overlay, is a little bit tedious.
I found http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/ , this works very well with my js ui library - riotjs, see this example: https://github.com/txchen/feplay/blob/gh-pages/riot_babel/js/app.html
Basically I prepare the dialog and make it hidden, to show, the the css and it includes transition effect. I am quite happy with this solution now, I don't need to use jQuery to get nice modal dialog.
from mui.
@txchen I'm working on adding official support for an overlay to v0.0.6 with the spec we discussed:
var options = {
keyboard: true, // if true, teardown when escape key is pressed (default: true)
static: false // if false, teardown when backdrop is clicked (default: false)
};
var modalEl = document.createElement('div');
modalEl.style.width = '300px';
modalEl.style.height = '500px';
modalEl.style.margin = '30px auto';
modalEl.style.backgroundColor = '#fff';
mui.overlay('on', options, modalEl);
To try it out you can check out the 0.0.6 branch:
https://github.com/amorey/mui/tree/0.0.6
Let me know what you think!
from mui.
@txchen The overlay method is live in v0.0.6:
https://www.muicss.com/docs/v1/css-js/overlay
Let me know what you think!
from mui.
@amorey Just tried that and it works well in my app, thanks!
from mui.
Awesome! Happy to hear it.
from mui.
Related Issues (20)
- npm run build-e2e-tests fails with an error HOT 2
- WebComponents part is outdated? Should we perfect it? HOT 1
- Label in input form not properly visualized HOT 2
- React Dividers example broken? HOT 1
- Configuration via mocha.opts is DEPRECATED HOT 2
- Clarify or change behavior of Tabs in CSS/JS HOT 3
- How we can update the muicss docs? HOT 3
- Outlined text HOT 2
- Dark mode support via automatic CSS media query prefers-color-scheme HOT 1
- limit size of select menu HOT 4
- Is this repo still being maintained? HOT 1
- Required validation for select HOT 2
- Reset form input validation HOT 4
- select with multiple attribute HOT 2
- Make tab hidden/visible on some criteria HOT 2
- MUI hacked? Github Repo has only a 0.10.2 tag and the website and NPM show a 0.10.3 version. HOT 1
- Support for react 17 HOT 5
- Bugs in negated `in` expressions
- [Autocomplete] How to implement? HOT 1
- Mobile Safari incorrectly warns "Your browser does not support WebComponents" HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui.