하고 싶은 일

aax를 사용하여 CRUD 기능이 있는 프로그램을 만들 때, 입력과 삭제 등을 통해 약간 유행하는 창을 만들고 싶기 때문에
어떤 SNS 스타일의 패턴 창을 모방해보자.

갈색 커튼석

왜 그래?

SPA에 요소를 차례로 추가하지 말고 html 파일에 모드 창의 요소를 만들고 클래스를 부여합니다.
CSS의 속성 중 하나로 지정된 요소의 투명도opacity를 사용하여 클래스 없이 숨겨진 표현을 표시합니다.
자바스크립트에서 클래스 요소를 조작해서 표시와 숨기기를 전환합니다.

HTML

코드

index.html

        <section id="main">
            //コンテンツ
        </section>
        <section id="modal" class = "modal--is_hidden">
            <div class="modal__body">
                <div class="modal__header modal__base">
                    <h2 class="modal__titletext"></h2>
                    <button class="modal__close">閉</button>
                </div>
                <div class="modal__item modal__base"></div>
                <div class="modal__footer modal__base">
                    <button class = 'modal_buttom modal__Cancel'>キャンセル</button>
                    <button class = 'modal_buttom modal__Submit'></button>
                </div>
            </div>
            <div class="modal__back modal__back--is_hidden"></div>
        </section>

해설

첫 번째section로 둘러싸인 곳은 이 페이지의 내용을 기재한 곳이다.
id가 modal인 section 모드 창 부분입니다.
다음은 내용입니다.
index.html

            <div class="modal__body">
　　　　　　　　　//中略//
            </div>
            <div class="modal__back modal__back--is_hidden"></div>

삽입 클래스 modal__body 에 표시할 부품의 섹션
클래스는 modal__back 이외의 배경 부분입니다.

배경 부분은 모드 창을 표시할 때 전체 화면을 검은색 반투명으로 덮어쓰는 UI로 작용한다
모드 창을 닫으려면 이 부분을 누르십시오.
닫기 기능 자체는 취소 단추와 오른쪽 닫기 단추 등 여러 곳에서 해야 한다.
그리고 modal__body 안에 있는 것을 깨끗이 하세요.
index.html

        <div class="modal__header modal__base">
            <h2 class="modal__titletext"></h2>
            <button class="modal__close">閉</button>
        </div>
        <div class="modal__item modal__base"></div>
        <div class="modal__footer modal__base">
            <button class = 'modal_buttom modal__Cancel'>キャンセル</button>
            <button class = 'modal_buttom modal__Submit'></button>
        </div>

header, item(body), footer 세 부분으로 나뉜다.header 중 h2 과 footer 중 button 중 하나는 문자를 쓰지 않았다
이것은 자바스크립트 측이 동적 변경을 할 수 있고 통용적으로 사용할 수 있도록 하기 위해서이다.item(body)도 상자만 제작되었고 그 안에는 자바스크립트 측에서 DOM을 제작하여 내용을 변경할 수 있습니다.

CSS

코드

style.css

.modal__back--is_hidden
{
    opacity: 0;
    pointer-events: none;
}

.modal--is_hidden
{
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
}

***--is_hidden 속성의 값을 0으로 설정하여 투명하게 만듭니다.
그러나 이 상태에서 투명해졌을 뿐 모드 창에 대한 반응은 계속되고 있다
모드 창 아래의 요소를 클릭할 수 없습니다.
따라서 opacity 속성을 사용하여 값을 pointer-events 로 설정합니다.
클릭한 대상에서 삭제하여 아래의 내용을 클릭할 수 있습니다.
또한 none를 통해서만 애니메이션을 표시 및 숨기지 않고 즉시 표시/숨기기opacity를 사용하면 transition 짧은 시간이지만 지정된 애니메이션을 통해 창이 사라집니다.
하지만 0.2s 숨길 수도 있고 이 경우 반투명 등 애니메이션을 천천히 넣을 수 없기 때문에 이번에 사용했습니다display:none.
(실제로 키프레임과 애니메이션을 사용하면 같은 일을 할 수 있지만 이번에는 opacity를 선택했다.)
style.css

.modal__base
{
    margin:0;
    padding:0;
    justify-content: center;
    text-align: center;
    align-items: center;
    display: flex;
}

.modal__header
{
    height: 45px;
    background-color: #bedcff;
    border-radius: 5px 5px 0 0;
    flex-direction: row;
}

.modal__item
{
    min-height: 100px;
    background-color: #ffffff;
    flex-direction: column;
}

.modal__footer
{
    height: 50px;
    background-color: #ffffff;
    border-top:1px solid #bdbdbd;
    border-radius:0 0 5px 5px ;
    justify-content: flex-end;
}

transition,header,item(body)의 디자인.footer에 탄성 상자를 지정하고 작은 요소를 중심으로 표시하도록 지정합니다.

javascript

코드

index.js

    function openModalWindow()
    {
       //非表示にしているクラスを取り除き、表示状態にする
        document.querySelector('#modal').classList.remove('modal--is_hidden');
        document.querySelector('.modal__back').classList.remove('modal__back--is_hidden');

       //モーダルウィンドウを閉じるためのイベントを追加する
        document.querySelector('.modal__back').addEventListener('click',closeModalWindow,false);
        document.querySelector('.modal__Cancel').addEventListener('click',closeModalWindow,false);
        document.querySelector('.modal__close').addEventListener('click',closeModalWindow,false);
    }

모드 창을 표시하기 위한 처리입니다.modal__base 방법으로 html의class에 숨겨진 ***--is_hidden을 삭제합니다.
또한 배경, 취소 단추, 오른쪽 상단의 닫기 단추에 모드 창을 닫는 이벤트가 추가되었습니다.
CSS 측면remove이므로 javascript
index.js

    function closeModalWindow()
    {    
        //モーダルウィンドウを非表示に
        document.querySelector('#modal').classList.add('modal--is_hidden');
        document.querySelector('.modal__back').classList.add('modal__back--is_hidden');

       //モーダルウィンドウを閉じるためのイベントを削除
        document.querySelector('.modal__back').removeEventListener('click',closeModalWindow,false);
        document.querySelector('.modal__Cancel').removeEventListener('click',closeModalWindow,false);
        document.querySelector('.modal__close').removeEventListener('click',closeModalWindow,false);
    }

모드 창을 숨기기 위한 처리입니다.
거의 한쪽의 반대를 나타내는 것이지 특별한 일이 있는 것은 아니다(´·ω·`)
index.js

        //タイトルを設定する
        document.querySelector('.modal__titletext').appendChild(document.createTextNode('ほげほげウィンドウ'));

제목과 하위 요소를 추가하는 방법transition이 사용됩니다.
문자열 추가도 appendChild 등을 사용하지 않고 "createTextNode"를 사용하여 텍스트 노드를 생성하고 추가합니다.

해 본 소감.

어떤 SNS 스타일의 디자인이지만 처음부터 모드 창, html의 구성 방법, css의 디자인,javascript의 인코딩 등 많은 것을 배울 수 있는 좋은 기회입니다.

다음 도전

다음에 같은 모드 창을 만들려면 Vue 등 프레임워크로 만들고 다양한 프레임워크 제작 방법 등을 배우고 싶어요.