2014-01-08 5 views
1

Я чувствую, что у меня здесь что-то невероятно немое, так что избавь меня.Bootstrap 3 модальный не работает?

Но я не могу заставить этот загрузочный модальный работать. Вот мой код:

<!DOCTYPE HTML> 
<head> 
<link rel="stylesheet" href="bootstrap.css" type="text/css" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
</head> 
<body> 
<!-- Button trigger modal --> 
<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-hidden="true">&times;</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><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 
</body> 

Здесь живут: http://gadole.com/guideu/modal.html

Любая помощь и/или направление было бы весьма признателен. Благодаря!

+1

Я получаю с обоими браузерами (chrome & firefox) ошибку: '' 'TypeError: a (...). On не является функцией http://gadole.com/guideu/js/bootstrap.min .js Линия 7''' (firefox) – Eich

ответ

3

модальная функция Bootstrap требует jQuery's on() method, который был введен с JQuery версии 1.7. Therefo re, вам нужно jQuery 1.7 или выше.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 

См http://jsfiddle.net/jhfrench/ZWv52/2/ для рабочего примера.

0

Я надеюсь, что это то, что вы хотите

HTML

<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p> 
    <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> 
    <div id="fade" class="black_overlay"></div> 

CSS

.black_overlay{ 
    display: none; 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    z-index:1001; 
    -moz-opacity: 0.8; 
    opacity:.80; 
    filter: alpha(opacity=80); 
} 

.white_content { 
    display: none; 
    position: absolute; 
    top: 25%; 
    left: 25%; 
    width: 50%; 
    height: 50%; 
    padding: 16px; 
    border: 16px solid orange; 
    background-color: white; 
    z-index:1002; 
    overflow: auto; 
} 
+0

вы пропустили открытие '' – AvrilAlejandro

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