Multiple modal 멀티모달 > 팁앤테크

사이트 내 전체검색

팁앤테크

jQuery | Multiple modal 멀티모달

페이지 정보

작성자 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일16-08-25 02:53 조회1,983회 댓글0건

본문

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <script type="text/javascript" src="jquery-1.11.2.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>
    <style type="text/css">
      .my-img a {
        display: inline-block;
        margin: 10px;
        border: 2px solid #CCC;
      }
      .my-img a:hover {
        border: 2px solid #45AFFF;
      }    
      .modal-lg {
        width: 86%;
      }
      .modal-body {
        overflow: auto;
        max-height: auto;
      }
    </style>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <div class="row">
    <div class="col-xs-12 my-img">
      <a href="#" id="link1" data-toggle="modal" data-target="#myModal">
        <img src="1.png" id="img1" class="img-responsive" width="250px">
      </a>
      <a href="#" id="link1" data-toggle="modal" data-target="#myModal">
        <img src="2.png" id="img2" class="img-responsive" width="250px">
      </a>
      <a href="#" id="link1" data-toggle="modal" data-target="#myModal">
        <img src="3.png" id="img3" class="img-responsive" width="250px">
      </a>
      <a href="#" id="link1" data-toggle="modal" data-target="#myModal">
        <img src="4.png" id="img4" class="img-responsive" width="250px">
      </a>          
  </div>  

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">your image title here (can be dynamic) </h4>
        </div>
        <div class="modal-body" id="showImg">

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

    </div>
  </div>

</div>
<script type="text/javascript">
      $(document).ready(function() {
        $('img').on('click', function() {
          $("#showImg").empty();
          var image = $(this).attr("src");
          $("#showImg").append("<img class='img-responsive' src='" + image + "' />")
          //alert(image);
        })
      });
</script>

</body>
</html>
  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.

팁앤테크 목록

Total 733건 1 페이지
팁앤테크 목록
번호 제목 글쓴이 날짜 조회
733 mobile 캐리어별 접속 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-05 330
732 css 기본사용 @media 사이즈 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-04 360
731 php 사내용 AMP 일본어 우편번호 인기글첨부파일 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-18 816
730 php 날짜 일수 차이 date_diff() 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-14 938
729 php 유투브 주소에서 아이디 값만 추출하기 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-10 937
728 jQuery jQuery, image changing on hover 마우스오버 이미지 변환 인기글관련링크 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-08 1118
727 jQuery 스크롤하면 고정되는 메뉴 제이쿼리 [펌] 인기글관련링크 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-15 1176
726 php PHP 현재 페이지 정보 확인하기 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-25 1373
725 etc ip 우회 접속하기 인기글첨부파일 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-24 1419
724 g5 일본어 홈페이지 제작시 G5_MOBILE_AGENT 추가사항 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-16 1423
723 jQuery 본문 내용 자동 새창으로 열기 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-05 1220
722 php 2단 셀렉트 연동 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-05 1432
721 etc 파이어 폭스에서 http / https 주소 확인하기 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-30 1687
720 php Warning: preg_match(): Unknown modifier 인기글관련링크 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-28 1725
719 PC noxappplayer를 통한 pokemon go는 실행이 막혔습니다. 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-27 1626
718 jQuery Multiple modal 멀티모달2 인기글관련링크 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-25 1969
열람중 jQuery Multiple modal 멀티모달 인기글관련링크 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-25 1984
716 jQuery 탭메뉴 인기글첨부파일관련링크 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-23 1756
715 php PHP Redirect 301 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-22 1781
714 PC 포토샵 CS 폰트 경로 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-05 1788
게시물 검색