How can my plugin generate a generic modal window in the Control Panel?

22

9

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?

Lindsey D

Posted 2014-06-21T07:47:28.053

Reputation: 18 570

Answers

18

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

Brandon Kelly

Posted 2014-06-21T07:47:28.053

Reputation: 27 245

Does the div need to be created in the jQuery object. Or can you reference the div from your inputType template? – aran – 2014-07-16T23:19:30.707

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 – 2014-07-16T23:53:20.473

That link to Modal.js should now be https://github.com/pixelandtonic/Garnish/blob/master/src/classes/Modal.js. I can't submit an edit as the change is less than 6 characters.

– Mike Vaux – 2016-08-02T12:04:51.573

@MikeVaux Thanks :) – Brandon Kelly – 2016-08-02T13:17:43.137

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 – 2014-06-21T20:22:03.453