可視化與引導彈出

我使用引導，我試圖應該可視化的彈出式窗口，當你點擊某個對象，在我的情況是隱藏的文本。這裏是我的代碼：可視化與引導彈出

<html> 
<head> 
     <link href="bootstrap.min.css" rel="stylesheet"> 
     <link href="bootstrap.min.js" rel="stylesheet"> 
     <script> 
$('#text').popover() 
</script> 
</head> 



<body> 
<a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a> 
</body> 
</html>

當我點擊的可視化文本（也就是「我看到它」）我沒有做任何事情。很明顯，我的整個代碼不止這個，但實際上這個腳本不能用這個簡單的HTML工作。

來源

2014-05-20 user2635652

與jQuery最好是等到DOM已準備就緒。這也不清楚你正在使用的引導版本，但我假設版本3

你可以試試下面的代碼，或者看看這個例子：http://jsfiddle.net/astuanax/s96Ag/

<html> 
<head> 
    <!-- Load jquery --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

    <!-- Load bootstrap from cdn, no need to load popover when loading the full bs library --> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" media="screen" title="no title" charset="utf-8"> 
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"> 
    </script> 
</head> 
<body> 


    <a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a> 

    <script type="text/javascript"> 
    /* Wait until the DOM is ready to call the popover function */ 
    $().ready(function(){ 
     $('#text').popover() 
    }); 
    </script> 
</body></html>

來源

2014-05-21 11:48:14 Astuanax

的JavaScript加載爲樣式表：更換<link href="bootstrap.min.js" rel="stylesheet">與<script src="bootstrap.min.js"></script>和</body>標籤

來源

2014-05-20 08:08:19 mmjmanders

好吧，這是一個很大的錯誤，你是對的。但是我做了你傷心的事情，但現在還不行。現在我在firebug的shell中得到這個錯誤：'錯誤：Bootstrap需要jQuery'和'ReferenceError：$未定義''$（'＃text'）。popover（）'。但實際上，我看到這個例子在jsfiddle上工作。這怎麼可能？ – user2635652

你必須這樣做：include jQuery。在引導腳本之前 – mmjmanders

它還沒有工作。我用完整的代碼回答。 – user2635652

我修改，你告訴我之前preferrably正確的地方這一點。下面是完整的代碼：

<html> 
<head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> 
     <link href="bootstrap.min.css" rel="stylesheet"> 
     <script src="bootstrap.min.js"></script> 


</head> 
<script> 
$('#text').popover() 
</script> 



<body> 
<a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a> 

</body> 
</html>

現在，它讓我看到以下錯誤：TypeError: $(...).popover is not a function和$('#text').popover()

所以我試圖解決這個加什麼要求，這是新的代碼：

<html> 
<head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> 
     <link href="bootstrap.min.css" rel="stylesheet"> 
     <script src="bootstrap.min.js"></script> 
     <script src="bootstrap-tooltip.js"></script> 
     <script src="bootstrap-popover.js"></script> 


</head> 
<script> 
$('#text').popover() 
</script> 



<body> 
<a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a> 

</body> 
</html>

現在沒有錯誤，但它仍然不起作用。

新的嘗試：

<html> 
<head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
     <link href="bootstrap.min.css" rel="stylesheet"> 
     <script src="bootstrap.min.js"></script> 
     <script src="bootstrap-tooltip.js"></script> 
     <script src="bootstrap-popover.js"></script> 


</head> 
<script> 
$('#text').popover() 
</script> 



<body> 
<a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a> 

</body> 
</html>

來源

2014-05-21 10:26:18 user2635652

你必須用'' – mmjmanders

關閉jquery列表。我把那一個。我也更新了jQuery表單1.4到1.7.2，現在我沒有像以前那樣得到錯誤。但它仍然不起作用。 – user2635652

我編輯了我的上一個答案，添加了新版本的代碼，並添加了最後一次修改。 – user2635652

可視化與引導彈出

回答

相關問題