jQuery로 모달 윈도우를 만드는 방법을 공부했으므로 기록해 둡니다.

1 준비

HTML을 준비. a 요소에 "modal"클래스를 붙여 둡니다.

        <ul>
            <li><a href="images/img1.png" class="modal">
                <img src="images/img1.png"></a></li>
            <li><a href="images/img2.png" class="modal">
                <img src="images/img2.png"></a></li>
        </ul>

결과.

여기에서 이미지를 클릭하면 그 이미지가 전면에 표시되도록 합니다.
※이 이미지는 적당히 프리 소재를 사용하고 있는 것만으로, 특히 의미는 없습니다.

2 JavaScript 작성

모달 창을 구현하기 위해 두 가지 요소를 추가합니다.
첫 번째는 전면에 표시되는 이미지.
두 번째는 이미지가 전면에 표시될 때 배경을 회색으로 만드는 요소입니다.
이것들은 초기 표시하지 않고, 우선 jQuery로 요소를 추가합니다.
또, 회색의 배경을 클릭하면 화상의 전면 표시가 캔슬되는(모달 윈도우를 닫는) 기능, 화상을 클릭하면 상기 2 요소가 표시되는(모달 윈도우를 표시한다) 기능을 만듭니다.

$(function(){
    $("body").append("<div id='background'></div><div id='mainImage'></div>");
    $("#background").click(function(){
        //モーダルウィンドウを閉じる
        $(this).hide();
        $("#mainImage").hide();
    });
    $("a.modal").click(function(){
        //モーダルウィンドウを開く
        $("#background").show();
        $("#mainImage").show();
        return false;
    });
});

$("body").append 에 의해 요소를 추가합니다.
추가하려면 회색 배경 <div id='background'></div> 와 이미지 <div id='mainImage'></div> 두 가지. 지금의 내용은 없습니다.
윈도우의 개폐는, hide() 와 show() 로 요소를 표시·비표시하는 것으로 구현합니다.

3 CSS 설명

jQuery에서 추가한 두 요소에 대해 내용을 만들기 위해 CSS를 작성합니다.

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.5;
}
#mainImage {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -256px;
    margin-left: -220px;
}

html, body

회색 배경을 화면 채우기 위해 먼저 html, body 요소에 대해 height: 100%;

#background

그 위에 회색 배경 요소 #background 에 대 한 height: 100%; , width: 100%; 합니다. 이제 브라우저 창이 가득 찬 요소가 표시됩니다.background-color: black; , opacity: 0.5; 를 사용하여 배경을 검정색으로 투과시킵니다. 이것은 회색 배경입니다.

#mainImage

top: 50%; , left: 50%; 에 의해, 윈도우의 중심점을 화상을 표시하는 기준 (이미지의 좌상의 점)으로 합니다.
게다가 margin 에, 이미지의 절반의 사이즈의 마이너스치를 지정하는 것으로, 이미지를 사이즈의 절반만큼 좌상으로 옮기는 효과가 얻어져, 결과적으로 화상이 화면 중앙에 표시됩니다.

마지막으로 #background 와 #mainImage 는 모두 초기 표시하지 않으므로 display: none; 로 둡니다.

결과.

이미지를 클릭하면 회색 배경이 나타나는 곳까지 할 수 있었습니다.

4 자바스크립트 설명, 다시

그 후에는 회색 배경과 함께 클릭한 이미지를 표시할 수 있으면 완성입니다.
현재 #mainImage 의 div 요소는 표시되지만 내용이 없는 상태입니다. 따라서 이를 클릭한 이미지를 표시하는 img 요소로 다시 작성해야 합니다.$("#mainImage").show(); 의 부분에 추기해 갑니다.

$("#mainImage").show().html("<img src='クリックした画像のパス'>");

이제 img 요소로 다시 쓸 수있었습니다.
그런 다음 클릭 한 이미지의 경로를 src 속성으로 설정합니다.
이것은 클릭한 a 요소의 href 속성에서 얻을 수 있습니다. 클릭한 요소는 this 로 지정하여 href 를 가져옵니다.

$("#mainImage").show().html("<img src='" + $(this).attr("href") + "'>");

더블 쿼테이션과 싱글 쿼테이션이 섞여 보기 어렵기 때문에 주의.
전체는 이런 느낌이 되었습니다.

$(function(){
    $("body").append("<div id='background'></div><div id='mainImage'></div>");
    $("#background").click(function(){
        //モーダルウィンドウを閉じる
        $(this).hide();
        $("#mainImage").hide();
    });
    $("a.modal").click(function(){
        //モーダルウィンドウを開く
        $("#background").show();
        //表示した上で、img要素に書き換える
        $("#mainImage").show().html("<img src='" + $(this).attr("href") + "'>");
        return false;
    });
});

결과.

이미지를 모달 창으로 표시할 수 있었습니다!