2015-05-09 5 views
0

Я знаю, что это очень простая проблема, но я огляделся и действительно не могу найти подходящее решение. Я очень новичок в html и javascript, так голый со мной ...Почему bootstrap Modal не работает

Вот полный HTML-код, который я использую. Бутстрап cdn в голове и остальное в теле ... копируется непосредственно с веб-сайта bootstraps. Кнопка есть, но модальные не отображаются. Что не так?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

</head> 

<body> 

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

</body> 
</html> 
+0

Вы не включили библиотеку jquery. – dsharew

ответ

1

Просто добавьте это:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

перед bootstrap.min.js Bootstrap требует jQuery запустить свой собственный javascript.

+0

Большое спасибо! –

+0

Если это правильно, примите мой ответ. Спасибо :) @ViktorNorlander – CENT1PEDE

0

BootstrapdependsJquery. поэтому вам нужно включить JQuery библиотека на вашей странице.

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