23

I'm working on a plugin, and it requires a modal to be displayed when the user interacts with a field of my Field Type. When the user finishes interacting with the modal, they would click "Done".

This is the standard modal that displays when you select Assets...

Assets Modal

I basically want a more generic version of this modal, where I can put anything I want into the middle of it.

I would love to have something like this:

Blank Modal

What's the best way to pull that off?

19

Create a div with whatever contents you want in the modal, and with a class "modal". Then create a new Garnish.Modal object with it:

var $div = $('<div class="modal">...</div>');
var myModal = new Garnish.Modal($div);
  • Shockingly simple and brilliantly effective... it's the Craft way. I'll have to play around with Garnish a little more to get exactly the behavior that I need, but this definitely puts me on the right track. Thanks Brandon, greatly appreciated! – Lindsey D Jun 21 '14 at 20:22
  • Does the div need to be created in the jQuery object. Or can you reference the div from your inputType template? – aran Jul 16 '14 at 23:19
  • 1
    @aran Doesn’t matter how the div was created. But keep in mind that it if it’s already positioned in the DOM, passing it to a new Garnish.Modal() instance is going to yank it out of its current position. – Brandon Kelly Jul 16 '14 at 23:53
  • That link to Modal.js should now be github.com/pixelandtonic/Garnish/blob/master/src/classes/…. I can't submit an edit as the change is less than 6 characters. – Mike Vaux Aug 2 '16 at 12:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.