이미지 용 트위터 부트 스트랩 - 모달

Question

등록 된 사용자의 세부 정보가 포함 된 페이지가 있습니다. 모든 html 표에는 80-90 명의 ​​사용자가 포함됩니다. 모든 사용자에게 $ username 변수가 있습니다. 나는 보통 아래의 코드와 같은 테이블에 사진을 보여줍니다.

print "<a href=\"small-avatar-$username.jpg\" target=\"_blank\"> 
<img src=\"big-avatar-$username.jpg\"> 
</a>"; 

그러나 사용자는 새 탭에서 이미지를 열 수 있습니다. 큰 아바타를 쉽게 보여주고 싶습니다. 첫 번째 선택은 라이트 박스 -jquery입니다. 하지만 내 사이트에서 twitter-bootstrap을 사용하기 때문에 기본 부트 스트랩 및 jquery 기능을 사용하기로 결정했습니다.

"부트 스트랩 - 모달"이 있다는 것을 알았습니다. 사용자가 링크를 클릭하면 큰 그림 이외에 아무것도 표시 할 계획이 없습니다.

print "<a href=\"#$username" data-toggle=\"modal\" class=\"img-modal\" > 
     <img src=\"small-avatar-$username.jpg\" ></a>"; 
print '</td>'; 

:

나는이 시도.

print "<div id=\"$username\" class=\"modal\">"; 
     <img src=\"big-avatar-$username.jpg\"> 
print "</div>"; 

.

<script type="text/javascript" id="js"> 
     $('#username').modal(); 
</script> 

나는 HTML 파일이 큰 것 내 페이지에 모든 사용자에 대해 $('#username').modal();
퍼팅 가정합니다.

하지만 다음과 같은 앵커 클래스 이름을 시도 : $('.img-modal').modal();
하지만이 작동하지 않았다.

이 상황에서 당신은 무엇을 권하고 싶습니까?

Answer 1

<a> 태그에 HTML5 Custom Data Attributes을 사용하여 사용자 이름을 확인하고 img-modal 클래스를 유지하는 것이 좋습니다.

"<a href="#myModal" data-username='".$username."' class="img-modal">... 

트리거

$('.img-modal').click(function(event) { 

당신은에 의해 사용자 이름의 값을 얻을 수있다 (당신은 "모달"= 데이터 토글이 필요하지 않습니다) .IMG 모달에 클릭에 모달 호출 당신은 이름을 가지고 있기 때문에

var username = $(this).attr('data-username') 

를 사용하여 당신은 같은 것을 사용하여 독특한 모달에 <img> 태그의 src 속성을 대체 할 수 있습니다.

$("#img-in-modal").attr("src","big-avatar-" + username + ".jpg") 

그리고 열려면 모달

$('#myModal').modal('show') 

그리고 마지막으로, 반드시 부트 스트랩 - modal.js 또는 boostrap.js이 포함되어 있는지 확인합니다.