включить привязку в модальном режиме twitter bootstrap

У меня есть модальный бутстрап, который отлично работает.

Заголовок/тело/нижний колонтитул модального окна заполнены правильными данными. Внутри модального тела у меня есть некоторый контент со ссылками на другие страницы, но они почему-то отключены по принципу «лайк».

Я предполагаю, что начальная загрузка применяет event.preventDefault(); ко всем ссылкам внутри модального тела или что-то подобное.

Есть ли способ снова включить их?

HTML:

<div class="modal show fadein static-modal" id="singlePageBox" data-show="true" data-backdrop="true" data-toggle="modal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h2 id="myModalLabel">dummy header</h2>
        </div>
        <div class="modal-body">
            <p>Lorem Ipsum is <a href="http://google.com" target="_blank" class="ext_link">It was popularised</a> in.</p>
        </div>
        <div class="modal-footer"> </div>

An example of what I mean http://jsfiddle.net/kulldox/ft3zX/


jquery twitter-bootstrap bootstrap-modal
person KullDox    schedule 13.08.2013    source источник
comment
Вы уверены, что это делает не только jsfiddle? Потому что я попробовал это на отдельной html-странице, и она отлично работает.   -  person Shaunak    schedule 14.08.2013

Ответы (3)


arrow_upward
4
arrow_downward

Это может быть связано с тем, как вы размечаете свой модальный. Также может быть какой-то пользовательский JS, который вы используете в своем проекте. Обратите внимание, что я не применил класс .ext_link и не использовал какой-либо пользовательский JS, чтобы заставить якорь работать.

Проверьте этот рабочий пример

Это простое копирование и вставка из документации. Обратите внимание, что это Bootstrap 2.3.2.

HTML:

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body... <a href="http://google.com" target="_blank">Go to Google with this Anchor</a></p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>
person sulfureous    schedule 13.08.2013

arrow_upward
1
arrow_downward

ОМГ, нашел проблему. Похоже, утренние мозги лучше, чем поздние ночи :)

По какой-то причине я установил data-toggle="modal" в модальном контейнере. Конечно, это отключает ссылки, потому что это должно вызвать само модальное окно.

Удалив это, проблема устранена. Вот исправленный jsfiddle.

http://jsfiddle.net/kulldox/ft3zX/3/

сернистый, спасибо, что подтолкнули меня к документации ;)

person KullDox    schedule 14.08.2013

arrow_upward
0
arrow_downward

Хорошо, это сложный вопрос. Но я подозреваю, что это происходит только в jsfiddle. Я создал новый пример в html-файле, поместил его в apache, и он отлично работает. Ссылки тоже работают. вот html, который я использовал:

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
        </style>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">

     </head>
    <body>

        <div class="container">


<div class="modal show fadein static-modal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p><a href="https://www.google.com/"  class="ext_link">It was popularised</a></p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

<a href="https://www.google.com/"  class="ext_link">It was popularised</a>

        </div> <!-- /container -->

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>


        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</body>
</html>
person Shaunak    schedule 13.08.2013
comment
Это делает не jsFiddle, проверьте мой ответ и скрипку, она работает нормально. - person sulfureous; 14.08.2013
comment
попробуйте использовать классы show и static-modal для вашего модального окна. Это то, что используется в вопросе. Ваш пример не подходит. Попробуйте приведенный выше пример в jsfiddle и дайте мне знать, работает ли он у вас. - person Shaunak; 14.08.2013