爲什麼我的Bootstrap彈出窗口不起作用？

我正在嘗試使用Bootstrap popover。所以我將示例中的確切代碼複製到了我的網站中，但遺憾的是這些代碼無效。我粘貼下面的完整代碼並創建了a jsfiddle here。爲什麼我的Bootstrap彈出窗口不起作用？

我試圖把它放在一個引導容器和行和列，但似乎沒有工作。

有沒有人如何讓那小提琴奏效？歡迎所有提示！

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
</head> 
<body> 
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> 
</body> 
</html>

來源

2015-05-05 kramer65

@Gunaseelan你不需要，如果你包括'bootstrap.min.js'就像OP是。 –

我已經更新了您的JSFiddle演示以包含jQuery，否則它會提供有關jQuery丟失的錯誤（儘管存在於您的代碼段中）。 –

LOL，6在10分鐘內回答同樣的事情：'$（'[data-toggle =「popover」]'）。popover（）' –

你忘了這一點： http://getbootstrap.com/javascript/#opt-in-functionality

出於性能考慮，工具提示和酥料餅的數據API是選擇加入，這意味着你必須自己初始化它們。初始化頁面上的所有提示

的一種方法是通過它們的數據切換屬性來選擇它們：

$(function() { 
    $('[data-toggle="popover"]').popover() 
})

來源

2015-05-05 11:15:42 Seblor

由於這是鏈接並引用源的唯一答案， 1給你。 –

您需要在<head>

$(function() { 
$('[data-toggle="popover"]').popover() 
})

來源

2015-05-05 11:11:05 khurram

添加此code你可以在button添加id或class屬性，不是調用該按鈕的酥料餅的方法。這是工作小提琴。 http://jsfiddle.net/uqLor9ze/。

這裏是fiddle

$('#pop').popover();

來源

2015-05-05 11:11:52 Kamran

示例代碼應該添加

$(function() { 
    $('[data-toggle="popover"]').popover() 
});

工作示例here

來源

2015-05-05 11:12:00 vamsikrishnamannem

出於性能方面的原因，你應該自己用來初始化酥料餅：

<script> 
$(function() { 
    $('[data-toggle="popover"]').popover() 
}) 
</script>

Reference

一定要在引導之前添加jQuery庫。

jsFiddle

來源

2015-05-05 11:12:45 jmgross

你失蹤函數調用到您的小提琴和jQuery庫還缺少

我已經添加缺少的依賴到你的例子

檢查小提琴：https://jsfiddle.net/L41g98qx/9/

這裏是一個酥料餅函數調用

$(function() { 
    $('[data-toggle="popover"]').popover() 
})

下面的文字是從getbootstrap複製。COM，這裏是他們想要說的酥料餅的插件什麼

選擇加入功能

出於性能考慮，工具提示和酥料餅的數據API是選擇加入，這意味着你必須初始化它們你自己。初始化頁面上的所有popovers

一種方法是選擇他們通過他們的數據切換屬性：複製

$(function() { $('[data-toggle="popover"]').popover() })

來源

2015-05-05 11:16:04

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?" id="example">Dismissible popover</a>

此方法需要

$('#example').popover('show');

DEMO

來源

2015-05-05 11:20:21 sheshadri

爲什麼我的Bootstrap彈出窗口不起作用？

回答

相關問題