Answers.Body: <p>Foud the answer after digging a bit, in fact I missed a little detail.</p>
  
  <p>The base javascript code was correct :</p>
  
  <pre><code>$modal = new Garnish.Modal($('#my-modal')); //create a new modal
  $modal.show(); //shows the modal
  $modal.hide(); //hides the modal
  </code></pre>
  
  <p>Everything is in the HTML code, you need to declare something like this :</p>
  
  <pre><code>&lt;div id="my-modal" class="modal"&gt; &lt;!-- modal body --&gt;
      &lt;div id="modal" class="body"&gt; &lt;!-- modal-content --&gt;
          &lt;header class="header"&gt;
              &lt;h2&gt;Modal header&lt;/h2&gt;
          &lt;/header&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Go check the <a href="https://github.com/pixelandtonic/garnishjs/blob/master/src/Modal.js" rel="nofollow noreferrer">modal sources</a> for api methods.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-04-05T08:44:16.600Z
Answers.LastActivityDate: 2017-02-28T21:31:56.540Z
Answers.LastEditDate: 2017-02-28T21:31:56.540Z
Answers.UserDisplayName: ovesco
Body: <p>I just want to create a modal and play with it, but can't find a way to do so. I already checked other questions on the subject, but I still can't figure why my modal isn't showing correctly.</p>
  
  <p>Here is my code :</p>
  
  <pre><code>&lt;div id="my-modal" class="modal-shade"&gt;
          &lt;div class="modal"&gt;
              some text I'd like to be shown...
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>var $modal = new Garnish.Modal($('#my-modal'));
  
  $('#show-modal-btn').click(function() {
      $modal.show();
  });
  </code></pre>
  
  <p>When I load the page, the big shader appears instantly, and my modal is nowhere to be found, and it moved in the dom tree. Clicking the button doesnt make it appear again.</p>
  
Tags: <garnish><modal>
Title: How to create modals
ThreadText: # How to create modals
  
  (Asked by: username_0 on 2016-04-05)
  
  I just want to create a modal and play with it, but can't find a way to do so. I already checked other questions on the subject, but I still can't figure why my modal isn't showing correctly.
  
  Here is my code :
  
  ```
  <div id="my-modal" class="modal-shade">
          <div class="modal">
              some text I'd like to be shown...
          </div>
  </div>
  
  ```
  
  ---
  
  ```
  var $modal = new Garnish.Modal($('#my-modal'));
  
  $('#show-modal-btn').click(function() {
      $modal.show();
  });
  
  ```
  
  When I load the page, the big shader appears instantly, and my modal is nowhere to be found, and it moved in the dom tree. Clicking the button doesnt make it appear again.
  
  **Tags:** garnish, modal
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2016-04-05. Score: 2
  
  Foud the answer after digging a bit, in fact I missed a little detail.
  
  The base javascript code was correct :
  
  ```
  $modal = new Garnish.Modal($('#my-modal')); //create a new modal
  $modal.show(); //shows the modal
  $modal.hide(); //hides the modal
  
  ```
  
  Everything is in the HTML code, you need to declare something like this :
  
  ```
  <div id="my-modal" class="modal"> <!-- modal body -->
      <div id="modal" class="body"> <!-- modal-content -->
          <header class="header">
              <h2>Modal header</h2>
          </header>
      </div>
  </div>
  
  ```
  
  Go check the [modal sources](https://github.com/pixelandtonic/garnishjs/blob/master/src/Modal.js) for api methods.
  
  
  ---
  
  