Question

我有一个完美的bootstrap模式。

模态的标题/正文/页脚用正确的数据填充。在模态体内，我有一些内容与其他页面的链接，但由于某种原因，他们“喜欢”禁用。

我猜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>

我的意思http://jsfiddle.net/kulldox/ft3zX/

的一个例子

Answer 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>

Answer 2

天啊，发现了问题。看起来早晨的大脑比深夜好：）

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

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

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

含硫，谢谢你把我推回文件;）

Answer 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>

在twitter bootstrap模式中启用锚点

3 个答案:

Check this working example

HTML：