Bootstrap modal не будет отображаться

My bootstrap (3.0.2) модальный не появится. Я пробовал разные кнопки, ссылки и все такое, но он просто не появится. Я ценю любую помощь!Bootstrap modal не будет отображаться

<head> 
    <link rel="stylesheet" href="css/bootstrap.min.css" /> 
</head> 
<body> 
    <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#purchaseModal">Purchase</button> 

    <div class="modal fade" id="purchaseModal" tabindex="-1" role="dialog" aria-labelledby="purchaseLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title" id="purchaseLabel">Purchase</h4> 
       </div> 
       <div class="modal-body"> 
        sup? 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Purchase</button> 
       </div> 
      </div> 
     </div> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    <script src="js/jquery-ui-1.10.3.custom.min.js"></script> 
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> 
</body>

UPDATE 1: Вот скриншот предупреждений в консоли.

enter image description here

ОБНОВЛЕНИЕ 2: Кнопка и модальный расположены внутри контейнера. Может быть, это может помочь на пути к решению?

источник

2013-11-18 Magnus Burton

Загрузить страницу -> Щелкните правой кнопкой мыши -> Проверить элемент (Google Chrome). Когда вы нажимаете ссылку на открытую модель, посмотрите, есть ли какие-либо ошибки в консоли. Post snapshot of Error –

Кажется, что все нормально работает: http://bootply.com/94899 Какие ошибки в консоли браузера? Вы можете удалить js/jquery-ui-1.10.3.custom.min.js'? и тест? – ZimSystem

@DawoodAwan Обновлен OP, спасибо за ваш ответ! –

Я думаю, вам нужно поставить Jquery и бутстрэпами файлов JavaScript путь в голове вас HTML. У меня была такая же проблема, и это сработало для меня.

<head> 
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css"> 
    <!-- put first the jquery path, otherwise the bootstrap.js won't work--> 
    <script src="js/jquery/jquery-3.1.0.js"></script> 
    <script src="plugins/bootstrap/js/bootstrap.min.js"></script> 
</head>

Надеется, что она работала :)

источник

2016-09-20 22:55:17

Этот код работает нормально. У вас ошибка JavaScript где-то:

Рабочий код:

<!DOCTYPE html > 

<html> 
<head> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>  
    <!-- Bootstrap --> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> 
    <!-- Optional theme --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css"> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> 



</head> 
<body> 
    <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#purchaseModal">Purchase</button> 

    <div class="modal fade" id="purchaseModal" tabindex="-1" role="dialog" aria-labelledby="purchaseLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title" id="purchaseLabel">Purchase</h4> 
       </div> 
       <div class="modal-body"> 
        sup? 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Purchase</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

источник

2013-11-18 17:19:12 sabotero

Это не сработало. Спасибо за ваш ответ. Я попытался добавить 'onclick = '$ (' # purchaseModal '). Modal (' show ');" 'к кнопке, и это заставило ее работать. В чем может быть проблема? –

Я не могу сказать, потому что код, который я здесь, работает для меня, в вашем коде, который вы добавили дважды jQuery, может быть, это? Вы пробовали точно мой код, просто поместите код в .html-файл и запустите его, а затем попытайтесь увидеть, что с вашим кодом отличается. – sabotero

Я решил эту проблему, добавив эту строку JQuery в нижней части страницы;

<script> 
    $("[data-toggle='modal']").modal(); 
</script>

источник

2014-06-30 15:04:16

Добавление этой одной строки кода в голову решило проблему для меня.

= javascript_include_tag 'application', 'data-turbolinks-track' => true

источник

2014-08-01 13:12:23

У меня такая же проблема. когда я добавляю этот код:

let postBody = event.target.parentNode.parentNode.childNodes[1].textContent;

модальный не появится. и когда я удаляю его, появляется модальная мода.

источник

2017-11-13 07:47:30 Lucky

Bootstrap modal не будет отображаться

ответ

Смежные вопросы