在 twitter 引导模式中启用锚点答案

【问题标题】：enable anchor in twitter bootstrap modal在 twitter 引导模式中启用锚点
【发布时间】：2013-08-13 21:39:32
【问题描述】：

我有一个完美的引导模式。

模态框的页眉/正文/页脚填充了正确的数据。在模态正文中，我有一些内容带有指向其他页面的链接，但由于某种原因，它们被“喜欢”禁用。

我猜引导程序应用了 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>

我的意思的一个例子http://jsfiddle.net/kulldox/ft3zX/

【问题讨论】：

你确定不只是 jsfiddle 在做吗？因为我在一个单独的 html 页面上尝试过，它工作正常。

标签： jquery twitter-bootstrap bootstrap-modal

【解决方案1】：

这可能是您标记模式的方式。也可能是您在项目中使用的一些自定义 JS。请注意，我没有应用 .ext_link 类，也没有使用任何自定义 JS 来让锚点工作。

Check this working example

这是对文档的简单复制和粘贴。请注意，这是 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>

【讨论】：

【解决方案2】：

天哪，找到问题了。看起来早上的大脑比深夜更好:)

出于某种原因，我在模态容器上设置了data-toggle="modal"。当然这会禁用链接，因为它应该触发模态本身。

删除它，解决了问题。这是固定的jsfiddle。

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

硫磺，感谢您将我推回文档；）

【讨论】：

【解决方案3】：

好的，这是一个棘手的问题。但我怀疑这只是发生在 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>

【讨论】：

这不是 jsFiddle 做的，检查我的答案和小提琴，它工作正常。
尝试为您的模态使用 show 和 static-modal 类。这就是问题中使用的内容。你的例子不匹配。在 jsfiddle 中尝试上面的示例，让我知道它是否适合您。