<p>Create a div with whatever contents you want in the modal, and with a class "modal". Then create a new <a href="https://github.com/craftcms/cms/blob/develop/lib/garnishjs/garnish.js" rel="nofollow noreferrer">Garnish.Modal</a> object with it:</p>

<pre><code>var $div = $('&lt;div class="modal"&gt;...&lt;/div&gt;');
var myModal = new Garnish.Modal($div);
</code></pre>

CC BY-SA 3.0
2014-06-21T20:22:03.453Z
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
CC BY-SA 3.0
2014-07-16T23:19:30.707Z
Does the div need to be created in the jQuery object.  Or can you reference the div from your inputType template?
a-am
CC BY-SA 3.0
2014-07-16T23:53:20.473Z
@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
CC BY-SA 3.0
2016-08-02T12:04:51.573Z
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
CC BY-SA 4.0
2014-06-21T16:09:41.480Z
2019-12-06T20:26:50.313Z
2019-12-06T20:26:50.313Z
Brandon Kelly
<p>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".</p>

<p>This is the standard modal that displays when you select Assets...</p>

<p><img src="https://i.sstatic.net/QZVA9.png" alt="Assets Modal"></p>

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

<p><strong>I would love to have something like this:</strong></p>

<p><img src="https://i.sstatic.net/KehTf.png" alt="Blank Modal"></p>

<p><strong>What's the best way to pull that off?</strong></p>

<plugin-development><control-panel><fieldtypes><modal><garnish>
How can my plugin generate a generic modal window in the Control Panel?
# How can my plugin generate a generic modal window in the Control Panel?

(Asked by: username_0 on 2014-06-21)

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](https://i.sstatic.net/QZVA9.png)

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](https://i.sstatic.net/KehTf.png)

**What's the best way to pull that off?**

**Tags:** plugin-development, control-panel, fieldtypes, modal, garnish


---

## 1 answers

### Answer by username_1 on 2014-06-21. Score: 19 | Accepted answer

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 = $('...');
var myModal = new Garnish.Modal($div);

> **Comments:**
> **username_0**: 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!  
> **username_2**: Does the div need to be created in the jQuery object.  Or can you reference the div from your inputType template?  
> **username_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.  
> **username_3**: 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.  

---

