Всплывающее окно Bootstrap 3 со ссылкой?

Question

Привет У меня есть небольшая проблема с связывая или так называемые ссылки текст с Bootstrap всплывающие окна, я не знаю, как она работает здесь код:

Когда пользователь нажимает на Мой маленький Понт 2 он должен всплывать с всплывающее окно с текстом «...».

<a href="#" class="list-group-item">My little Pontus 2</a> 
 

 
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
 
    <div class="modal-dialog modal-sm"> 
 
    <div class="modal-content"> 
 
     ... 
 
    </div> 
 
    </div> 
 
</div> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Answer 1

Сначала вам нужно включить все необходимые библиотеки для вашего проекта , Это: jquery, bootstrap css и bootstrap js.

И тогда вам нужно дать id вашим Modal и включают в себя, что id на вашем link вместе с data-toggle="modal" так, что ссылка запускает требуемую modal.

Вот ваш обновленный код:

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

 
<a href="#" class="list-group-item" data-toggle="modal" data-target="#myModal">My little Pontus 2</a> 
 

 
<div id="myModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
 
    <div class="modal-dialog modal-sm"> 
 
    <div class="modal-content"> 
 
     ... 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Посмотрите на это: (вы с отсутствующим data-toggle="modal")

<!-- 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"> 
    <div class="modal-dialog" role="document"> 
    <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> 

больше на: http://getbootstrap.com/javascript/#modals