Multiple modal 멀티모달 > 팁앤테크

사이트 내 전체검색

팁앤테크

jQuery | Multiple modal 멀티모달

페이지 정보

작성자 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일16-08-25 02:53 조회2,494회 댓글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 738건 1 페이지
팁앤테크 목록
번호 제목 글쓴이 날짜 조회
738 PC 윈도우 10 앱 삭제 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-14 88
737 PC 노트북 윈도우 10 핫스팟 자동 실행 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-09 91
736 php select 주소 이동하기 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-25 355
735 css Noto Sans KR (Korean) 적용하기 인기글관련링크 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-20 347
734 PC 외장하드가 갑자기 RAW가 되어 인식이 불가능한 상황일때 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-30 422
733 mobile 캐리어별 접속 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-05 882
732 css 기본사용 @media 사이즈 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-04 920
731 php 사내용 AMP 일본어 우편번호 인기글첨부파일 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-18 1383
730 php 날짜 일수 차이 date_diff() 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-14 1464
729 php 유투브 주소에서 아이디 값만 추출하기 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-10 1420
728 jQuery jQuery, image changing on hover 마우스오버 이미지 변환 인기글관련링크 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-08 1605
727 jQuery 스크롤하면 고정되는 메뉴 제이쿼리 [펌] 인기글관련링크 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-15 1637
726 php PHP 현재 페이지 정보 확인하기 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-25 1881
725 etc ip 우회 접속하기 인기글첨부파일 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-24 1976
724 g5 일본어 홈페이지 제작시 G5_MOBILE_AGENT 추가사항 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-16 1883
723 jQuery 본문 내용 자동 새창으로 열기 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-05 1636
722 php 2단 셀렉트 연동 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-05 1922
721 etc 파이어 폭스에서 http / https 주소 확인하기 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-30 2179
720 php Warning: preg_match(): Unknown modifier 인기글관련링크 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-28 2230
719 PC noxappplayer를 통한 pokemon go는 실행이 막혔습니다. 인기글 zero 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-27 2093
게시물 검색