twitter bootstrap popovers не работает внутри модалов

Даже когда в загрузочных документах пополняется внутри модалов, я не могу заставить его работать в моем собственном коде.twitter bootstrap popovers не работает внутри модалов

Если вы открываете следующее jsFiddle, вы можете заметить, что всплывающие подсказки и всплывающие подсказки не работают внутри модального. Я верю, что я правильно воспроизвел образец кода.

Я запустил скрипку в режиме инкогнито, чтобы исключить проблемы с расширениями хрома без везения.

Я предполагаю, что здесь что-то отсутствует. Можете ли вы определить, что я сделал неправильно?

Смотрите следующий код:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title> - jsFiddle demo</title> 
     <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
</head> 
<body> 
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h4 class="modal-title" id="myModalLabel">Modal Heading</h4> 
     </div> 
     <div class="modal-body"> 
      <h4>Text in a modal</h4> 
      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> 
      <h4>Popover in a modal</h4> 
      <p>This <a href="#" role="button" class="btn btn-default popover-test" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on click.</p> 
      <h4>Tooltips in a modal</h4> 
      <p><a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p> 
      <hr> 
      <h4>Overflowing text to show scroll behavior</h4> 
      <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> 
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> 
      <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> 
      <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> 
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> 
      <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> 
      <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> 
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> 
      <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> 
     </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> 
<div class="bs-example" style="padding-bottom: 24px;"> 
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
     Launch demo modal 
    </button> 
    </div> 
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>  
     <script type='text/javascript' src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> 
</body> 
</html>

источник

2014-03-22 Cesar

Используя подсказки, поповер являются Opt-в функциональность, которая означает, что вы должны вручную инициализировать плагин, чтобы заставить его работать

В этом случае, вы должны поместить это в файл сценария

$('.tooltip-test').tooltip(); 
$('.popover-test').popover();

см обновленный fiddle

источник

2014-03-22 04:00:35

Теперь всплывающие подсказки работают! Спасибо за любую идею о popover? – Cesar

@ Cesar Ой, извините, я пропустил это, посмотрю на мое редактирование –

twitter bootstrap popovers не работает внутри модалов

ответ

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