monique
Atelier de monique
monique
전체 방문자
오늘
어제
  • 분류 전체보기 (76)
    • Daily (1)
    • Tips (1)
    • Learning (63)
      • Basic (12)
      • JAVA (11)
      • Javascript (5)
      • MariaDB (1)
      • Spring (2)
      • HTML (3)
      • Thymeleaf (1)
      • Nuxt.js (0)
      • Vue.js (0)
      • Oracle+DB (3)
      • Python (1)
      • Linux (1)
      • Git (5)
      • Errors (15)
      • .NET (3)
    • Portfolio (10)
      • The Book Quotes (2)
      • KYP COFFEE (6)
      • [국비] Java & Spring 개발 양성과정 (0)
    • Reading (1)
      • Scrap (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • About

공지사항

인기 글

태그

  • 리스트 고유값
  • 플래닛 텍스 환급
  • RDS 환불
  • 리스트 값 구별
  • AWS 결제취소
  • Amazon RDS billing
  • 리스트 가져온 뒤 값 선택
  • 특정시간에 동작하는 스크립트
  • 특정 시간 alert
  • 리스트에서 특정 값 선택
  • DB에서 한 컬럼에 데이터 넣기
  • Rider DB연동
  • 파리텍스환급
  • Viewbag과 Model 차이
  • 인터셉터 적용
  • spring게시판
  • 카카오톡 공유하기 구현
  • Rider AWS 연동
  • 카카오톡 공유하기 javascript
  • 서버에서 데이터 조회 안될때

최근 댓글

최근 글

티스토리

250x250
hELLO · Designed By 정상우.
monique

Atelier de monique

Learning/Javascript

이미지 클릭시 크게보이는 모달창 구현

2022. 10. 13. 22:14
<div class="modal">
    <div class="modalBox" style="text-align: center;">
    </div>
</div>
<img src="/bookImg/${book.bookUuid}" alt="Image" class="img-fluid">
<script>
$(function(){

    $("canvas").ondblclick(function(){
        let img = new Image();
        img.style.objectFit = 'cover';
        img.style.maxWidth = '1200px';
        img.style.maxHeight = '1200px';
        img.src = $(this).attr("src")

        $('.modalBox').html(img);
        $(".modal").show();
    });

    $(".modal").click(function (e) {
        $(".modal").toggle();
    });
});
<script>
728x90
저작자표시 비영리 변경금지 (새창열림)

'Learning > Javascript' 카테고리의 다른 글

테이블 목록 번호 재정렬하기  (0) 2023.08.27
특정 시간대에 동작하는 Alert창 만들기  (0) 2023.01.08
웹페이지 카카오톡으로 공유하기  (0) 2022.10.13
폼 데이터 출력  (0) 2022.08.30
    'Learning/Javascript' 카테고리의 다른 글
    • 테이블 목록 번호 재정렬하기
    • 특정 시간대에 동작하는 Alert창 만들기
    • 웹페이지 카카오톡으로 공유하기
    • 폼 데이터 출력
    monique
    monique
    a junior web developer's archive

    티스토리툴바