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?

Improve this question

1 Answer 1

Reset to default
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);
Improve this answer
4
  • 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
    Commented Jun 21, 2014 at 20:22
  • Does the div need to be created in the jQuery object. Or can you reference the div from your inputType template?
    – a-am
    Commented Jul 16, 2014 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
    Commented Jul 16, 2014 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
    Commented Aug 2, 2016 at 12:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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