title: Reusable modals in html/javascript
body: <p>I have the following popup modal:</p>
  
  <pre><code>&lt;div class="modal-wrapper" style="display: block;"&gt;
      &lt;div class="modal-popup-margin"&gt;
          &lt;div class="modal-popup"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close close-modal"&gt;×&lt;/button&gt;
                  &lt;span class="modal-title"&gt;Change Password&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;div class="row"&gt;
                       &lt;span class="label"&gt;Old Password&lt;/span&gt;
                       &lt;input class="Textinput form-control ng-pristine ng-untouched ng-invalid old-password ng-invalid-required" value="" type="password" name="oldPassword" /&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                       &lt;span class="label"&gt;New Password&lt;/span&gt;
                       &lt;input class="Textinput form-control ng-pristine ng-untouched ng-invalid new-password ng-invalid-required" value="" type="password" name="newPassword" /&gt;
                  &lt;/div&gt;
                  &lt;div class="row error-row"&gt;
                       &lt;span class="label"&gt;&amp;nbsp;&lt;/span&gt;
                       &lt;span class="error-message"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-primary submit"&gt;SAVE&lt;/button&gt;
                  &lt;button type="button" class="btn btn-default-flat-goog pull-right close-modal"&gt;CANCEL&lt;/button&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-backdrop close-modal"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It is meant to be re-usable, in that I would define the following for each item that calls it:</p>
  
  <ul>
  <li>The name or the button(s) that are included in the <code>modal-footer</code>.</li>
  <li>The various fields in the modal body, everything that is now a <code>row</code>.</li>
  <li>The name of the modal, in <code>modal-title</code>.</li>
  <li>The <code>url</code> the form submits to on clicking the <code>SAVE</code> button.</li>
  </ul>
  
  <p>How would I create a "re-usable" form here without copy-pasting this same modal into each template and re-writing the changeable parts of it?</p>