twitter-bootstrap 在 Twitter 引导模式中启用锚点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18219688/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
enable anchor in twitter bootstrap modal
提问by KullDox
I have a bootstrap modal that works perfect.
我有一个完美的引导模式。
The header/body/footer of the modal is filled with the right data. Inside the modal body I have some content with links to other pages, but for some reason they are ”like” disabled.
模态的页眉/正文/页脚填充了正确的数据。在模态正文中，我有一些包含指向其他页面的链接的内容，但由于某种原因，它们被禁用。
I guess bootstrap applies the event.preventDefault(); to all the links inside the modal body, or something similar.
我猜引导程序应用 event.preventDefault(); 到模态体内的所有链接，或类似的东西。
Is there a way to re-enable them?
有没有办法重新启用它们？
HTML:
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/
我的意思的一个例子http://jsfiddle.net/kulldox/ft3zX/
回答by sulfureous
It might be in the way you are marking up your modal. Could also be some custom JS that you are using in your project. Notice I didn't apply the .ext_linkclass not did I use any custom JS to get the anchor to work.
这可能是您标记模态的方式。也可能是您在项目中使用的一些自定义 JS。请注意，我没有应用.ext_link该类，也没有使用任何自定义 JS 来使锚点工作。
Check this working example
检查这个工作示例
It's a simple copy and paste from the documentation. Please note that this is Bootstrap 2.3.2
这是文档中的简单复制和粘贴。请注意，这是 Bootstrap 2.3.2
HTML:
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>
回答by KullDox
OMG, found the problem. Looks like morning brains are better than late night :)
OMG，发现问题了。看起来早上的大脑比深夜好:)
For some reason I've set the data-toggle="modal"on the modal container. Certainly this disables the links because it should trigger the modal itself.
出于某种原因，我data-toggle="modal"在模态容器上设置了。当然，这会禁用链接，因为它应该触发模态本身。
Removing that, fixed the problem. Here is the fixed jsfiddle.
删除它，解决了问题。这是固定的jsfiddle。
http://jsfiddle.net/kulldox/ft3zX/3/
http://jsfiddle.net/kulldox/ft3zX/3/
sulfureous, thanks for pushing me back to documentation ;)
硫磺，感谢您将我推回文档；）
回答by Shaunak
Okay this is a tricky one. But I suspect this is just happening in the jsfiddle. I created a fresh example in html file, placed it in apache and it runs perfect. The links work too. here is the html i used:
好吧，这是一个棘手的问题。但我怀疑这只是发生在 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">×</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>
