Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-21T20:22:03.453Z
Answers.Text: 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!
Answers.UserDisplayName: Lindsey D
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-07-16T23:19:30.707Z
Answers.Text: Does the div need to be created in the jQuery object.  Or can you reference the div from your inputType template?
Answers.UserDisplayName: a-am
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-07-16T23:53:20.473Z
Answers.Text: @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.
Answers.UserDisplayName: Brandon Kelly
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-08-02T12:04:51.573Z
Answers.Text: 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.
Answers.UserDisplayName: Mike Vaux
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2014-06-21T16:09:41.480Z
Answers.LastActivityDate: 2019-12-06T20:26:50.313Z
Answers.LastEditDate: 2019-12-06T20:26:50.313Z
Answers.UserDisplayName: Brandon Kelly
Body: <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>
  
Tags: <plugin-development><control-panel><fieldtypes><modal><garnish>
Title: How can my plugin generate a generic modal window in the Control Panel?
ThreadText: # 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](https://github.com/craftcms/cms/blob/develop/lib/garnishjs/garnish.js) object with it:
  
  ```
  var $div = $('<div class="modal">...</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 username_1, 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.  
  
  ---
  
  