Why does the overlay go on top of the modal window? Bootstrap, DLE

Question

HTML

Such is the problem..
When opening a modal window, a line appears at the very end of the source code of the page:
<div class="modal-backdrop fade in"></div>
How to make the overlay appear behind the modal window?
Plus, authorization does not work in the modal window, after pressing the "login" button, the page is updated.
Here is the site
Here is the modal window source code (located in login.tpl):

[group=5]
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#foo">
  Вход
</button>
<div class="modal fade bs-example-modal-sm" id="foo" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h5 class="modal-title" id="myModalLabel">Авторизируйтесь пожалуйста</h5>
      </div>
        <div class="modal-body">
          <div class="logform">
          <div class="form-group">
            <input class="form-control" type="text" name="login_name" id="login_name" placeholder="Логин">
          </div> 
          <div class="form-group">
           <input type="password" name="login_password" id="login_password" class="form-control" placeholder="Пароль">
          </div>
        </div>
        <button class="btn btn-lg btn-primary btn-block" onclick="submit();" type="submit">Вход</button>
          <br><center><a href="{lostpassword-link}">Забыли пароль?</a> | <a href="{registration-link}">Регистрация</a></center>
      </div>
    </div>
  </div>
</div>
[/group]

Answer 1

Set the z-index attribute to a lower value in .modal-backdrop (z-index: 1;) And why include everything and everything (bootstrap.min.js, bootstrap.js, bootstrap.css, bootstrap.min.css)?