title: Modal that use data-dismiss="modal" data-target="#id" don't go to their destination
body: <p>I am trying to focus the input field using modal data-target function on button click. It is focusin but a div called <code>&lt;div class="modal-backdrop in"&gt;</code> is created and modal didn't get close properly.<a href="https://i.stack.imgur.com/4yL9S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4yL9S.png" alt="enter image description here"></a> So user can't click anywhere on the site. There seems to be an issue that I cannot find documented and hopefully, someone here can shed some light on it. I want to focus on that input field when user click <code>Upload Now</code> button on modal. Here is the <a href="https://jsfiddle.net/wLp7sszu/11/" rel="nofollow noreferrer">demo</a></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>.height500 {
    height:500px;
    background-color:yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="height500"&gt;&lt;input type="text" name="" class="" id="noimgtakediv" /&gt;&lt;/div&gt;
  &lt;a data-toggle="modal" data-target="#portfoliomsgmodal" class="btn btn-danger btn-sm"&gt; Click to Open Modal&lt;/a&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div id="portfoliomsgmodal" class="modal fade" tabindex="-1"&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;&amp;times;&lt;/button&gt;
                  &lt;h3 class="modal-title"&gt;TIP&lt;/h3&gt; &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                      &lt;label&gt;There are twice as much chances of you getting contacted by your customers if you upload something in your portfolio. Upload photos or video or audio links to your profile.&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button class="btn btn-warning" data-target="#noimgtakediv" data-toggle="modal" data-dismiss="modal"&gt;Upload Now&lt;/button&gt; 
                  &lt;input type="submit" id="submitlater" class="btn btn-primary nomargin" value="Remind me later"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>