부트 스트랩으로 팝업 시각화

부트 스트랩을 사용하고 있는데 특정 객체를 클릭했을 때 팝업을 시각화해야하는 자바 스크립트를 사용하고 있습니다. 내 경우에는 숨겨진 텍스트입니다. 다음은 내 코드입니다 :부트 스트랩으로 팝업 시각화

<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

는 DOM이 준비가 될 때까지 기다려야하는 것이 좋습니다. 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

자바 스크립트가 스타일 시트로로드 : <script src="bootstrap.min.js"></script>와 <link href="bootstrap.min.js" rel="stylesheet">를 교체하고 양호하게는 바로 당신이 나에게로 내가 수정 한 </body> 태그

출처

2014-05-20 08:08:19 mmjmanders

좋아, 즉 : 당신이 사용하는,하지만 난 당신이 아래의 코드를 시도하거나 예를 살펴 수 있습니다 버전 3

을 가정하고 부트 스트랩 버전도 명확하지 않다 큰 실수는 네 말이 맞아. 그러나 나는 당신이 슬프고 아직 작동하지 않는 것을했습니다. 이제 firebug 쉘에서이 오류가 발생합니다 :'Error : Bootstrap은 jQuery가 필요하고'ReferenceError : $ is not defined''$ ('text'). popover()'. 하지만 실제로 jsfiddle에서 작동하는이 샘플을 보았습니다. 어떻게 가능합니까? – user2635652

jQuery가 포함되어야한다. 부트 스트랩 스크립트 바로 앞에 – mmjmanders

아직 작동하지 않습니다. 나는 완전한 코드로 대답했다. – user2635652

전에 놓습니다. 그것은 나에게 다음과 같은 오류 보여줍니다 지금

<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>

지금 오류는 없지만 여전히 작동하지 않습니다.

새로운 시도 : jQuery로

<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

jquery 포함을 '' – mmjmanders

으로 닫아야합니다. 나는 그걸 넣었다. 또한 jquery 양식을 1.7.2 1.7.2 업데이트 된 지금 이전과 같은 오류가 발생하지 않습니다. 하지만 여전히 작동하지 않습니다. – user2635652

마지막 수정과 함께 코드의 새 버전을 추가하는 이전 답변을 편집했습니다. – user2635652

부트 스트랩으로 팝업 시각화

답변

관련 문제