Will this library include popup dialog in the future?

[txchen]

Just found mui, looks pretty nice, thanks for making this!

As title, will this include modal dialog feature in the future? If not, may I know what's the recommended way to implement that? Thanks!

[amorey]

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...

[txchen]

@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.

[amorey]

Great! Pure looks very interesting. I'll take a closer look and see what we can learn from their implementation.

[amorey]

@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);

[txchen]

@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.

[amorey]

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...

[txchen]

@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.

[amorey]

@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!

[amorey]

@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!

[txchen]

@amorey Just tried that and it works well in my app, thanks!

[amorey]

Awesome! Happy to hear it.