0

부트 스트랩 대화 상자 (modal-body)에 소셜 'like'버튼 (fb, tweets 등)을 넣으려고하므로 <script> 태그를 넣습니다.부트 스트랩 대화 상자에서 JavaScript 코드를 실행하지 않습니다.

<div style='display: none;' modal="shouldBeOpen" close="close()" options="opts"> 
    <div class="modal-header"> 
     <h3 class="modal-title">Modal title</h3> 
     <button class="close" ng-click="close()" data-dismiss="modal">×</button> 
    </div> 
    <div class="modal-body"> 
     <table border="0" width="100%" cellspacing="0" cellpadding="0"> 
      <tr> 
       <td> 
       <!-- facebook --> 
       <div id="fb-root"></div> 
       <script>(function(d, s, id) { 
        var js, fjs = d.getElementsByTagName(s)[0]; 
        if (d.getElementById(id)) return; 
        js = d.createElement(s); js.id = id; 
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=228306107317368"; 
        fjs.parentNode.insertBefore(js, fjs); 
       }(document, 'script', 'facebook-jssdk'));</script> 

       <div class="fb-like" data-href="https://www.facebook.com/CVsIntellect" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="box_count" data-action="like" data-show-faces="false" data-send="false"></div> 

       </td> 
       <td> 

       <!-- twitter --> 
       <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://www.cvsintellect.com" data-text="CVsIntellect - The best free online Resume Builder. Uses LaTeX to create your CV!" data-via="CVsIntellect" data-count="vertical">Tweet</a> 
       <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 

       </td> 


      </tr> 

     </table> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

그러나 브라우저의 해당 대화 상자에는 아무 것도 보여주지 않습니다. 나는 특별한 것을 놓치고 있니?

답변

2

부트 스트랩 조동사 아무것도하지만, 숨겨진 없습니다 div

가 열릴 때 페이지로드에서 실행되지 않고되지 모달 안에 넣어 스크립트. 당신이 모달 열 때 자바 스크립트에서 뭔가를 트리거 할 경우 는 사용

$('#myModal').on('shown.bs.modal', function (e) { 
    // do whatever you want... 
}) 
+0

당신은 내가 몇 가지 일반적인 JS 코드이 메이크업 감각을 실행하려는 경우 오른쪽입니다. 하지만 이러한 소셜 위젯 코드는 무엇입니까? FB/Twitter 위젯을 코드 내부에 삽입하려면 어떻게해야합니까? 나 한테 설명해 줄래? –

+0

모달이 플래그 변수를 사용하여 단 한 번 열릴 때 해당 스크립트를 실행하십시오. – Raghavendra

+0

위젯 코드는 한 번만 실행해야합니다. 그래서 그냥 modal 쪽을 포함시키고'modal-body' 안에 버튼 코드를 넣으십시오. http://plnkr.co/edit/JbjoaXJW8PblRZO9AeKK?p=preview이 plunkr을보십시오. – Raghavendra

관련 문제