Bootstrap v3.3.7 modal window doesn't exit on IE8. How to fix?

T

tarabukinivan2018-04-03 10:15:06

Bootstrap

tarabukinivan, 2018-04-03 10:15:06

Good afternoon!
Bootstrap modal not working on IE8. On chrome, firefox everything works. Errors in ie:

Сведения об ошибке на веб-странице

Агент пользователя: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0)
штамп времени: Tue, 3 Apr 2018 07:00:28 UTC

Сообщение: Объект не поддерживает это свойство или метод
Строка: 2
Символ: 29759
Код: 0
URI-код: http://kolyma.com/js/jquery.min.js

Сообщение: Bootstrap's JavaScript requires jQuery
Строка: 6
Символ: 31
Код: 0
URI-код: http://kolyma.com/js/bootstrap.min.js

Сообщение: Предполагается наличие объекта
Строка: 1
Символ: 1
Код: 0
URI-код: http://kolyma.com/js/scripts.js

The page code itself:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->  
  <link rel="shortcut icon" type="image/x-icon" href="<?=PATH?>favicon.ico" />
  <!--<link href='https://fonts.googleapis.com/css?family=Open+Sans:700,400&subset=latin,cyrillic' rel='stylesheet' type='text/css'>-->	
  <link href="<?=PATH?>css/bootstrap.min.css" rel="stylesheet">
  <!-- HTML5 Shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- Предупреждение: Respond.js не работает при просмотре страницы через файл:// -->
    <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script >
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->
  <link href="<?=PATH?>css/style.css" rel="stylesheet">
  <link href="<?=PATH?>css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
  <title>Колыма</title>
  </head>
  <body>
  	<!-- Modal -->
  <div class="modal fade" id="ModalVhod" tabindex="-1" role="dialog" aria-labelledby="ModalVhodLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document"><!--размер-->
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="ModalVhodLabel">Войти</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form action="" method="post">
        <div class="modal-body">
          
            <div class="form-group">
              <label for="email" class="col-form-label">e-Mail:</label>
              <input type="email" id="email" class="form-control" name="email" autocomplete="off" placeholder="[email protected]" required>
            </div>
            <div class="form-group">
              <label for="password" class="col-form-label">Пароль:</label>
              <input type="password" id="password" class="form-control" name="password" autocomplete="off" required>
            </div>
          <?php if($request['view']!=reg){?>
          <a href='<?=PATH?>?view=reg'>Регистрация</a>
          <?php }?>
        </div>
        <div class="modal-footer clearfix">	        
          <button name="auth" type="submit" class="btn grad-btnm float-right" value="Autorization">Вход</button>
          <button type="button" class="btn grad-btnm float-left" data-dismiss="modal">Отмена</button>
        </div>
        </form>
      </div>
    </div>
  </div><!-- .Modal -->
    
    <div class="gradient1" style="height: 100%">
  <div class="container borm" style="height: 100%">
    <div class="table100">
      <div class="tablerow">
        <div class="tablecell">
          <div class="row">
            <div class="col-md-12 borm">
              <h1 class="text-center logo-text">kolyma</h1>
            </div>
          </div>
          <?php if(!$_SESSION['auth']['user']):?>
          <div class="row flex-items-xs-center mainvhod">	
            <button type="button" class="btn grad-btn" data-toggle="modal" data-target="#ModalVhod">Начать</button>
            <button type="button" class="btn grad-btn">Подробнее</button>
          </div>
          <div class="row">
            <div class="maintext">
            <p><em>Сайт <span class="compt">kolyma</span>технической поддержка пользователей </p></em>
            </div>
          </div>
          <?php else:?>
          <div class="mainpageauth">				
            <a href="/?view=cabinet">Кабинет пользователя</a>
            <a href="?do=logout">Выход</a>
          </div>
          <?php endif;?>
        </div>
      </div>
    </div>
  </div>
</div>
    
  <script src="<?=PATH?>js/jquery.min.js"></script>
    <script src="<?=PATH?>js/bootstrap.min.js"></script>
  </body>
</html>

The bootstrap is not modified, downloaded from the office. site and not changed. Tried replacing [if lt IE 9] with [if IE 8]
Sorry. Solved a problem. Topic can be closed

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

T

tarabukinivan, 2018-04-04
@tarabukinivan

Thanks, solved by replacing jquery.min.js and bootstrap.min.js with another version. It is ie8, as many of us still sit even on xp, and there are a lot of sevens with ie8. And that is why bootstrap 3 was chosen, not bootstrap 4.
Switching to 8 and 10 is not supported, since many pirates have old ones.
I solved the problem almost immediately and added at the end of the question that I had solved it. Why no one reads to the end?

V

Viktor Taran, 2018-04-03
@shambler81

Guys, it's not even funny, what kind of Ie8
HERE, give me a screen from the metrics, pliz, I just want to see what you are developing for so many users.
IE10 has 0.7% of visitors, how many does IE8 have? 0.02%?
it may well turn out that 3 visitors a year come to your site from such a device, it’s better to spend time tweaking the layout for the adaptive on the site.

A

awesomer, 2018-04-03
@awesomer

No way.
Bootstrap promises at least IE10
Cross-browser compatibility is one of the problems that Bootstrap is trying to solve.
Without it, you need much more layout experience.
try this:
www.joostrap.com/blog/bootstrap-3-supporting-inter...