[jQuery] Multiple modal 멀티모달 > 팁앤테크

본문 바로가기
사이트 내 전체검색

팁앤테크

[jQuery] Multiple modal 멀티모달

페이지 정보

본문

<!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>
추천0

댓글목록

등록된 댓글이 없습니다.

Total 825건 21 페이지
  • RSS
팁앤테크 목록
번호 제목 글쓴이 조회 추천 날짜
325 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18883 0 05-02
324 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18860 0 02-25
323 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18828 0 04-25
322 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18816 0 12-31
321 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18811 0 01-22
320 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18793 0 10-08
319 귀여운현호쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 18783 0 10-23
318 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18782 0 03-08
317 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18777 0 04-20
316 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18774 0 04-10
315 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18772 0 11-28
314 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18760 0 04-18
313 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18747 0 07-13
312 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18735 0 11-13
311 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18729 0 05-17
310 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18713 0 10-24
309 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18703 0 05-21
308 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18666 0 10-27
307 소피쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18649 0 02-05
306 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18637 0 08-21
305 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18612 0 12-18
304 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18610 0 01-06
303 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18601 2 03-06
302 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18594 0 10-03
301 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18591 0 08-27

검색

회원로그인

회원가입

사이트 정보

株式会社YHPLUS / 대표 : ZERO
〒140-0011 東京都品川区東大井2-5-9-203
050-5539-7787
오픈카카오톡 (YHPLUS) :
https://open.kakao.com/o/slfDj15d

접속자집계

오늘
1,389
어제
5,743
최대
9,679
전체
2,621,510
Copyright (c) 株式会社YHPLUS. All rights reserved.