モードウィンドウ

スプリントにはモダという言葉がありますが、この奇妙な語感が何なのか知りたいです.
英語の辞書の中の言葉スタイル形態上の法医.このように使うのは、実際の用途とは全く関係ないようです.
Modelの場合、ウィキペディア「ユーザー・インタフェース設計の概念では、サブウィンドウから親ウィンドウに戻る前に、アプリケーションのメイン・ウィンドウのワークフローを阻害するユーザーのインタラクティブな操作を要求するウィンドウです.通常、ダイアログ・ボックスを呼び出すときによく使用されるため、モード・ダイアログ・ボックスと呼ばれます.」ファイルを開く/保存するダイアログボックスは分かりやすいです.」と説明しています.
通常、ポップアップウィンドウとモードウィンドウを比較するときは、サブウィンドウから親ウィンドウに継承する概念に重点を置いて比較します.modalに近いのは、アプリケーションのメインウィンドウのワークフローを妨げることを意味します.
モードウィンドウ(サブページ)を開くと、モードウィンドウが終了するまで親ページは機能しません.レッスンを追加します.

モードウィンドウと名前を付けた場合、このモードウィンドウの操作が終了するまで、他の操作は実行できません.Modalウィンドウの意味と重要性はここにあります.他のタスクに移動する前に必要な情報伝達を行うか、必要なデータを受信するためにプロシージャを追加できます.

リアクターからモデルウィンドウを作成するには

スタイルの使用-コンポーネント

親構成部品

//ModalContainer.jsx
import React, { useState } from 'react'
import Modal from './Modal'


const ModalContainer = () => {
    const [modalOpen, setModalOpen] = useState(false)
    const modalClose = () => {
        setModalOpen(!modalOpen)
    }

    return (
        <>
        <button onClick={modalClose}>Click</button>
        { modalOpen && <Modal modalClose={modalClose}></Modal>}
        </> // 조건부 사용

    )
}

export default ModalContainer

ボタンを押すと、モードClose関数が起動します!modopenはtrue値を返します.
次に、モード構成部品を実行します.

モード構成部品

// Modal.jsx

import React from 'react'
import './Modal.scss'

const Modal = ({modalClose}) => {
  
  	const onCloseModal = (e) => {
        console.log('e.target: ', e.target)
        console.log('e.tarcurrentTargetget: ', e.currentTarget)
        if(e.target === e.currentTarget){
            modalClose()
        }

    }
    return (
        <div className="modal__container" onClick = {onCloseMedal}>
            <div className="modal">
                <button className="modal__button" onClick={modalClose}> Modal Close</button>
            </div>
        </div>
    )
}

export default Modal

このセクションでは、Stateドラッグ&ドロップ、親コンポーネントから子ウィンドウの開くまで、サブウィンドウから親ウィンドウにデータを渡し、false値にデータを再変換する必要があることに注意してください.
したがって、{modalClose}をサブエレメントに渡し、その値を再取得する必要があります.

モードcss設定

// Modal.scss

.modal__container{
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.4);
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;

    .modal{
        width: 300px;
        height: 150px;
        background-color: #fff;
        // Modal 창 브라우저 가운데로 조정
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%, -50%);
        z-index:100;

        .modal__button{
            position: relative;
            left: 50%;
            top:50%;
            transform: translate(-50%, -50%);
        }
    }
}

自ら。

ボタンを押すと、モードウィンドウを開いたり閉じたりするのは安全です.しかし、満足すれば、開発ではありません.Modelコンポーネントウィンドウでモデルウィンドウを開くハンドルを宣言し、ボタンをtrueからfalse、falseからtrueに変更します.

モードウィンドウを開くと、x文字の部分をクリックするだけで済みますが、部分全体がクリックターゲットになります.

<ModalContainer >
        <ModalBtn onClick = {openModalHandler} > 
          {isOpen ? 'Opened!' : 'Open Modal'}
          {isOpen && <ModalBackdrop>
              <ModalView>
                <ModalViewButton onClick = {openModalHandler}>
                  X
                </ModalViewButton>
                "Hello states"
              </ModalView>
            </ModalBackdrop>}
        </ModalBtn>
      </ModalContainer>

ずっと下に掛けていたのに、問題があったようです.
だからボタンが終わったら、独立したものと見なして解決します.
調べてみましたが、「アクティブバブル」が引き起こした問題です.エレメントにイベントが発生すると、親エレメントのイベントも発生します.
この場合、私のように切断するか、イベントが発生した部分を{e=>e.openModalHandler}に置き換えて、このような状況を回避できます.

<ModalContainer >
        <ModalBtn onClick = {openModalHandler} > 
          {isOpen ? 'Opened!' : 'Open Modal'}
        </ModalBtn>
          {isOpen && <ModalBackdrop>
              <ModalView>
                <ModalViewButton onClick = {openModalHandler}>
                  X
                </ModalViewButton>
                "Hello states"
              </ModalView>
            </ModalBackdrop>}
      </ModalContainer>

cssの理解が欠けているため、モードウィンドウの領域は管理されていない.

paddingとborderの重要性を理解しました.

ModalContainerスタイル要素

const ModalContainer = styled.div`
  text-align: center; //가운데 정렬
  margin: 125px
  // 125px 만큼 여분
  // auto;auto : 가로 중앙에 배치한다는 뜻, 그리고 자연스럽게 좌우 여백은 균등하게 배분
  width: 100%; //영역을 다루는게 아직 미숙하다...
  height: 5rem;
`;

ModalBackdrpスタイル要素

  const ModalBackdrop = styled.div`
 // TODO : Modal이 떴을 때의 배경을 깔아주는 CSS를 구현합니다.
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  //position : absolute 원래 위치와 상관없이 위치를 지정, 가장 가까운 상위 요소를 기준으로 위치가 결정
  //position : fixed 원래 위치와 상관없이 위치를 지정, 상위요소에 영향받지않기 떄문에 화면이 바뀌더라도 고정된 위치를 설정할 수 있다
  background-color: rgba(0, 0, 0, 0.6);
`;

ModaViewスタイル要素

  const ModalView = styled.div.attrs(props => ({
  role: 'dialog'
}))`
  width: 300px;
  height: 300px;
  border-radius: 10px; // 모서리 깍기
  background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); // 가운데 정렬하는 또 다른 방법
  font-size: 2em;
  color: black
  `;

ソース

http://www.gnujava.com/board/article_view.jsp?article_no=3797&board_no=11&table_cd=EPAR04&table_no=04
https://dkmqflx.github.io/frontend/2021/04/26/react-modal-close/

モード
https://www.zehye.kr/ios/2020/01/26/11iOS_modal/