javascript - "popover"Twitter Bootstrap css/javascript 库上的问题

标签 javascript css twitter-bootstrap

我尝试使用 Twitter Bootstrap 在我的网站上实现弹出窗口 javascript,但我做不到。如果有人可以帮助我处理我的代码,我将不胜感激。在此先感谢您。

<head>
...
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/html5.js"></script>  
    <script src="scripts/bootstrap-tabs.js"></script>
    <script src="scripts/bootstrap-alerts.js"></script>
    <script src="scripts/bootstrap-popover.js"></script>
    <script src="scripts/bootstrap-twipsy.js"></script>
    <script src="scripts/bootstrap-modal.js"></script>
    <script src="1.3.0/bootstrap-scrollspy.js"></script> -->

    <link rel="stylesheet" href="bootstrap.css" />

...
</head>
<body>
...

                                <div class="tab-content">
                                    <div class="active" id="dwcenter_iso">
                                        <table class="zebra-striped">
                                            <thead>
                                                <tr>
                                                    <th>Arquivo</th>
                                                    <th>Tamanho</th>
                                                    <th>Data</th>
                                                    <th>md5</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><a href="download.php">nimbus-opensource-backup-1.1.iso</a> <span class="label success">new</span></td>
                                                    <td>332M</td>
                                                    <td>16/09/11</td>

<!-- HERE GOES -->
                                                 <td><a href="#" class="btn danger" rel="popover" title="md5 Check Sum" data-content="343453453453453rfef34">ver</a>
                                                       <script>
                                                                $(function () {
                                                          $('a[rel=popover]')
                                                            .popover({
                                                              html: true
                                                            })
                                                            .click(function(e) {
                                                              e.preventDefault()
                                                            })
                                                        })
                                                      </script> 
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>nimbus-opensource-backup-1.0.iso <span class="label important">deprecated</span></td>
                                                    <td>332M</td>
                                                    <td>10/08/11</td>
                                                    <td>ver</td>
                                                </tr>
                                                <tr>
                                                    <td>nimbus-opensource-backup-0.9beta.iso <span class="label important">deprecated</span></td>
                                                    <td>380MB</td>
                                                    <td>25/09/10</td>
                                                    <td>ver</td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    </div>


...
</body>

我试过“html: true”和 Bootstrap 文档示例“offset: 10”。 它确实显示了红色危险按钮,但随后什么也没有发生(弹出窗口不起作用)。

还有其他问题,我如何在表格的 TD 元素而不是按钮上实现它?

最佳答案

更改这两个脚本,因为 popover 是 twipsy 的扩展,需要先加载...

<script src="scripts/bootstrap-twipsy.js"></script>
<script src="scripts/bootstrap-popover.js"></script>

您不需要将 html 设置为 true,这是我的选项,您可以根据需要更改

$(function(){
   $(".btn").popover({
       offset: 5,
       placement: 'left'
    });
});

关于javascript - "popover"Twitter Bootstrap css/javascript 库上的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7584933/

相关文章:

javascript - Webpack - 如何 bundle/要求文件夹(子文件夹)的所有文件

twitter-bootstrap - 如何将 Twitter Bootstrap 2 与 play framework 2.x 一起使用

javascript - 自动完成菜单上方的输入框 - Bootstrap 3

javascript - 有没有办法在 jquery 中克隆 sumoselect 下拉列表

JavaScript:使用 window.setTimeout 触发 CSS Transition

javascript - Famo.us 修改器有效执行 `display: none;`

jquery - 左对齐 Magnific Popup - 内嵌到 DIV ID

css - gmail 邮件中的绝对定位

jquery - 如何将所有子元素的padding和margin设置为0

javascript - Bootstrap Modal 在点击时不打开(触发)