如何在 twitter-bootstrap 中编写弹出窗口?我正在寻找使用 JavaScript 激活弹出框的分步说明。

请您参考如下方法:

我还不了解 JavaScript,但这是我设法实现 Bootstrap 弹出窗口的方法。

确保您的文档已与 popover 插件和工具提示插件链接,如果没有链接到这些文件,请使用以下链接:

    <script src="assets/js/bootstrap-tooltip.js"></script> 
    <script src="assets/js/bootstrap-popover.js"></script> 

将上述代码插入到结束正文标记的正上方,如下所示:

    <script src="assets/js/bootstrap-tooltip.js"></script> 
    <script src="assets/js/bootstrap-popover.js"></script> 
 
    </body> 

然后将此脚本插入结束正文标记之上:

    <script type="text/javascript"> 
     $(function() {$("a.pop").popover({ animation: true, placement: 'left', trigger: 'hover' })}); 

总而言之,您粘贴的代码应如下所示:

    <script src="assets/js/bootstrap-tooltip.js"></script> 
    <script src="assets/js/bootstrap-popover.js"></script> 
 
    <script type="text/javascript"> 
      $(function() { 
      $("a.pop").popover({ animation: true, placement: 'left', trigger: 'hover' })}); 
    </script> 
 
    </body> 

现在,为弹出功能标记 anchor 标记。像这样:

<a href="#" class="pop" title="Pop!" data-content="Some Content"> 

说明,data-content="" 保存弹出窗口的内容。 title="Pop!" 包含标题。

class="pop" 是您选择的任何类名,但请确保该名称与上面脚本中找到的类名相匹配,即 $("a.pop")

如果你更喜欢使用id,那么应该是这样的,

 <a href="#" id="pop" title="Pop!" data-content="Some Content"> 

和...

    <script type="text/javascript"> 
      $(function() { 
      $("a#pop").popover({ animation: true, placement: 'left', trigger: 'hover' })}); 
    </script> 

此示例代码将呈现一个左侧弹出框,如果您想将其弹出到其他边,则将 placement: 'left' 更改为即 placement: 'top'


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!