2015-10-09 4 views
0

Я использую Bootstrap Modal для отображения сообщения. У меня есть ссылка запускающей модальная:Bootstrap Модально не открытие, но фон появляется

<a class="row-btn" id="where-we-are" href="#" onclick="$('.www').modal('show');"><span class="glyphicon glyphicon-map-marker"></span><br>Where We Are</a> 

страница потемнела от фона, но модальный не показывает.

<div class="modal fade www"> 
    <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">Sorry, that's classified.</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Our location is top secret. We have many enemies who track us day and night to discover our secrets. Who knows, you might be one of them!</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

Является ли проблема, потому что я запускаю модальную ссылку? Почему возникает фон, но не сам модальный?

+0

Попробуйте 'onclick = '$ ('. Www '). Modal (' show '); return false;" ', не уверен, что это решит проблему – Tushar

+0

Нет, st плохое не показано. Страница: http://tricksfortheweb.net46.net/ – TricksfortheWeb

+0

Код, который вы предоставили, работает так, как предполагается, поэтому это должно быть что-то еще, что вызывает проблему. Возможно, это место, где вы разместили фактический модаль на странице; другой элемент может блокировать его. – vanburen

ответ

1

Я отправленное рабочий код твоего

В Bootstrap мы имеем возможность предоставить целевой div.classname как data-target="provide class Name" и data-toggle="modal" упомянуть, что его модальный

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 

 
<a class="row-btn" id="where-we-are" href="#" data-toggle="modal" data-target=".www" ><span class="glyphicon glyphicon-map-marker"></span><br>Where We Are</a> 
 

 
<div class="modal fade www"> 
 
    <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">Sorry, that's classified.</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Our location is top secret. We have many enemies who track us day and night to discover our secrets. Who knows, you might be one of them!</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal -->