title: trying to open modal popup but its button are disable
body: <p>I am trying to open a modal on click of "Launch Demo Modal" button.but the popup which is opening has all buttons are disable  I am trying   to resolve it but not getting the result. Css property define in classes 'main and main-raised' i have mentioned below.Any help would be appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main {
        background: #FFFFFF;
        position: relative;
        z-index: 3;
      }
      
      .main-raised {
        margin: -60px 30px 0px;
        border-radius: 6px;
        box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;div class="main main-raised" style="min-height :700px;"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-8 col-md-offset-2 text-center"&gt;
              &lt;!-- Button trigger modal --&gt;
              &lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"&gt;
                              Launch demo modal
                          &lt;/button&gt;
          &lt;/div&gt;
  
          &lt;!-- Sart Modal --&gt;
          &lt;div class="modal fade" id="myModal" 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;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;
                                              &lt;i class="material-icons"&gt;clear&lt;/i&gt;
                                          &lt;/button&gt;
                          &lt;h4 class="modal-title"&gt;Modal title&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;p&gt;
                              Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
                          &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-footer"&gt;
                          &lt;button type="button" class="btn btn-default btn-simple"&gt;Nice Button&lt;/button&gt;
                          &lt;button type="button" class="btn btn-danger btn-simple" data-dismiss="modal"&gt;Close&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--  End Modal --&gt;
      &lt;/div&gt;
      &lt;div&gt;</code></pre>
  </div>
  </div>
  </p>