1

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

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

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

4

3 回答 3

4

这可能是您标记模态的方式。也可能是您在项目中使用的一些自定义 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>
于 2013-08-13T22:04:52.267 回答
1

OMG，发现问题了。看起来早上的大脑比深夜更好:)

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

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

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

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

于 2013-08-14T06:28:28.107 回答
0

好吧，这是一个棘手的问题。但我怀疑这只是发生在 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>
于 2013-08-13T22:20:04.960 回答