title: How to show a modal dialog using bootstrap
body: <p>Earlier i was using a jquery dialog to show a pop-up message. However I need to use boostarp for my project and I am not able to figure out a way to actually show the pop-up.
  The code that i used for my jquery dialog:</p>
  
  <pre><code>showUserWarningMessage: function (title, message, callback, scope, username) {
      var $dialog = $("#dialog-move-user-warning");
      $dialog.dialog({
          resizable: false,
          height: 450,
          width: 580,
          modal: true,
          top: 200,
          dialogClass: "warning-dialog",
          title: title,
          position: ["center", 200],
          open: function () {
              $dialog.find(".btn-default").on("click", function () {
                  $dialog.dialog("close");
              });
              $dialog.find(".btn-primary").on("click", function () {
                  $dialog.dialog("close");
                  if (callback) {
                      if (scope) {
                          callback.call(scope);
                      } else {
                          callback();
                      }
                  }
              });
          },
  </code></pre>
  
  <p>And he code im writing for bootstrap modal:</p>
  
  <pre><code>showAlertMessage: function(options) {
       var $dialog = $("#dialog-move-user-warning");
       $dialog.modal("show");        
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="modal fade" id="dialog-move-user-warning" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                   &lt;h4 class="modal-title" id="myModalLabel"&gt;User Info&lt;/h4&gt;
  
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For some reason its not displaying anything on the screen, though the background gets disabled as though there is an overlay popped, but can see it. i tried changing the defaults set for the <code>class="modal"</code>, but it didnt help.
  What im i doing wrong, or anything additional needed for the overlay to display?
  is there any <code>css</code> that i need to change?
  Thanks in advance!</p>