Feature suggestion: Dialogs via JS

[matteoformenti]

Hi, would you like to consider adding a JS method that allows the creation of simple modals only using javascript? A line of code is the best way to explain: Materialize.modal("error/info/warning", "Title of the modal", "Text", "icon-name").ok(onOkClicked()).cancel(onCancelClicked()) This feature would be perfect for every error, information or other simple dialog that everybody has to write million times in their webapp.

[DanielRuf]

That is not a normal modal and I think there are already jQuery plugins for this.

[storm1er]

But make this could be an awesome feature thanks to it's "standardization" =D

EDIT : but I think it shouldn't use Materialize.modal() as it is already used by a lot of people

[Maqsyo]

I think it's way better like it is. My Modals are fully customized. Fully full full full! So this would destroy everything.. And i really have to say, that i dont need this in any case :D

[matteoformenti]

Yeah, I'm aware about jquery's plugins, but having a graphically coherent error/information panel could be really useful. RN I do the same thing with a custom function that includes a standard modal in the DOM (the modal is hardcoded in the function) and than it applies some text.

[penguoir]

This is quite easy to do on your own but should (in my opinion) eventually be added into the Materialize library.

Here is what I did:

(function($) {
  /*
  options: {
    id: 'modal1',
    title: 'Modal Header',
    content: 'Content goes in this area',
    action: 'Accept',
    actionLink: '#'
  }
  */
  $.fn.cModal = function(options) {
    $(this).append(`
<div id="${options.id}" class="modal">
  <div class="modal-content">
    <h4>${options.title}</h4>
    <p>${options.content}</p>
  </div>
  <div class="modal-footer">
    <a href="${options.actionLink}" class="modal-action modal-close waves-effect waves-green btn-flat ">${options.action}</a>
    </div>
  </div>
`)
    $(`#${options.id}`).modal()
  }
})(jQuery)

// later...

$('body').cModal({
  id: 'modal1',
  title: 'Modal Header',
  content: 'Content goes in this area',
  action: 'Accept',
  actionLink: '#'
})

// to open:
$('#modal1').modal('open')
// to close:
$('#modal1').modal('close')

codepen

It's quite clumsy but you get the gist. A custom modal function is quite easy to add yourself if you really need it.

I might do a pull request into the main framework if I get an 'OK' from one of the moderators.

Hope this helps!

[storm1er]

I was thinking about something even more standardized : EDIT : i call newModal method but it should be something more understandable like popup or callUserAction ^^'

var myModal = Materialize.newModal({
  class:'', // personnalized class, we should implement default like 'alert', 'information' or 'action'
  title:'',
  content:'', // supposed to be non html, like toast
  html:false, // true to enable htmlContent
  action: {
    'cancel':function(){
      myModal.close();
    },
    'ok':function(){
      // do stuff
      myModal.close();
    },
    '<i class="material-icons left">save</i>Register': function(){
      // do stuff
      myModal.close();
    }
  }
});

myModal.open();

// make this possible :
myModal.destroy();

If we supposed that actions are link, we can still do window.location.href = url; No problem about link, hash or only script action.

[DanielRuf]

callUserAction and popup make not much sense. Why not just dialog? But first let's check if this is part of Material Design.