학습 내용을 비망록으로 정리하다.
모드 창이 설치되어 있습니다. 만드는 방법을 설명해 주십시오.

위에서 말한 바와 같이 모드 창 조작 발언 등을 사용할 수 있다.

설치 방법

아래에 설치 방법을 기재해 주십시오.

발언 단추 만들기

버튼을 클릭할 때 모드 창 내보내기
발언 단추를 만듭니다.
header.php

    <ul>
    <li><a href="../user/user_list.php?type=all">ユーザー一覧</a></li>
    <li><a href="../post/post_index.php">投稿一覧</a></li>
    <li><a class="post_window" href="#">投稿</a></li>
    <li><a href="../message/message_top.php">メッセージ</a></li>
：
：
    </ul>

머리글에 추가投稿ボタン.
이것post_window을 클릭하면 JavaScript 처리가 시작됩니다.

JavaScript에서 모드 내보내기 창

방금 발언 단추를 눌렀을 때 출력 모드 창을 설치합니다.
user_page.js

$(document).on('click', '.post_window', function() {
    //背景をスクロールできないように　&　スクロール場所を維持
    scroll_position = $(window).scrollTop();
    $('body').addClass('fixed').css({ 'top': -scroll_position });
    // モーダルウィンドウを開く
    $('.post_process').fadeIn();
    $('.modal').fadeIn();
});

post_window를 클릭하면 처리가 자동으로 진행됩니다.

    scroll_position = $(window).scrollTop();
    $('body').addClass('fixed').css({ 'top': -scroll_position });

모드 창을 출력할 때 배경 화면을 스크롤하지 않습니다.
스크린 스크롤 위치를 가져와 고정합니다.

    $('.post_process').fadeIn();
    $('.modal').fadeIn();

출력 모드 창입니다.
원래의 모드 창이 없기 때문에 계속 제작합니다.

모드 창 생성

post_process.php

<div class="modal"></div>
<div class="post_process">
  <h2 class="post_title">投稿</h2>
  <form method="post" action="../post/post_add_done.php" enctype="multipart/form-data">
  <textarea class="textarea form-control" placeholder="投稿内容を入力ください" name="text"></textarea>
  <div class="post_btn">
  <button class="btn btn-outline-danger" type="submit" name="post" value="post" id="post">投稿</button>
  <button class="btn btn-outline-primary modal_close" type="button">キャンセル</button>
  </div>
  </form>
</div>

투고 버튼을 누르면 처리가 바뀐다.post_add_done.php는 SQL 명령문post_add_done.php이다.
※ 위 코드는 설명상 필요 없는 부분을 생략해 맨 윗부분의 동작 화면과 다릅니다.

<div class="modal"></div>

이 줄은 다음에 설명할 것입니다. 모드 창을 출력할 때 배경이 회색으로 변합니다.
그럼 지금부터 이쪽 모드 창을 디자인해 보겠습니다.

모드 창 레이아웃

style.css

.post_process {
    display: none;
    position: fixed;
    z-index: 15;
    top: 30%;
    left: 50%;
    width: 600px;
    padding: 10px;
    background-color: #121212;
    border-radius: 8px;
    -webkit-transform: translate(-50%, -10%);
    transform: translate(-50%, -10%);
    color: #fff;
    font-size: 1.3rem;
    border: 0.3rem solid #fff;
}

표시할 위치, 배경색 등을 결정합니다.postテーブル 중 겹치는 순서가 비교적 높다INSERT에서 수강생들이 평소에 표시하지 않고 z-index: 15;의 처리에서 출력하도록 한다.
방금 언급한 모드 창을 출력할 때의 배경도 레이아웃되었습니다.

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(152, 152, 152, 0.7);
    width: 100%;
    height: 100%;
    z-index: 10;
}

여기에도 위치(화면 전체), 배경색이 결정됐다.display: none; 모드 창보다 겹치는 순서를 설정합니다.
상술한 설치를 한 번 하면 맨 윗부분의 동작 화면처럼 움직일 수 있을 것 같다.

참조 링크