Почему оверлей идет поверх модального окна? Bootstrap, DLE

Question

[Dino124]

Такая вот проблема..
При открытии модального окна в самом конце исходного кода страницы появляется строчка:
<div class="modal-backdrop fade in"></div>
Как сделать так чтобы оверлей появлялся за модальным окном?
Плюс ко всему в модальном окне не работает авторизация, после нажатия кнопки "вход" страница обновляется.
Вот сайт
Вот исходный код модального окна (лежит в 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

[N]

Задай меньшее значение атрибута z-index в .modal-backdrop (z-index: 1;) И зачем подключать все и вся (bootstrap.min.js, bootstrap.js, bootstrap.css, bootstrap.min.css)?