소개

Rails로 만든 웹 응용 프로그램 fitness innovator
※현재 정지중

인스타는 일일이 멋진이므로, 모달을 모방해 버렸습니다.

Bootstrap의 도입 방법에 관해서는, 구그하면 많이 나오므로 이번은 할애합니다.

이번에는 이런 것을 만들어 갑니다.

Bootstrap4의 기본 모달

위에서 후왓와 나오는 녀석입니다.

이 녀석을 사용자 정의합니다.

HTML

xxx.html

~~省略~~
<div class="xxx" data-toggle="modal" data-target="#myModal">
<!-- この要素をクリックするとモーダルが出現します -->
</div>
~~省略~~
<!-- モーダルの設定 -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title mx-auto" id="exampleModalLabel">プロフィール写真を変更</h4>
      </div>
      <div class="modal-body">
        <span class="link-font">写真をアップロード</span>
      </div>
      <div class="modal-body">
        <span class="denger-link">現在の写真を削除</span>
      </div>
      <div class="modal-body-b">
        <span data-dismiss="modal">キャンセル</span>
      </div>
    </div>
  </div>
</div>
<!-- モーダルの設定 -->

data-target="#myModal 의 요소를 클릭하면 모달이 나타납니다.

class를 지정하여 css를 커스텀하고, 버튼으로 하거나, 이미지로 하거나, 원하는 대로 설정해 갑니다.
modal-body 안을 원하는대로 사용자 정의하십시오.

제 경우에는 Rails에서 앱을 만들었으므로 link_toメソッド 로 링크했습니다.

CSS

xxx.scss

body{
  background-color:#FAFAFA;
  color: #262626;
  font-size: 14px;
  font-family: -apple-system,BlinkMacSystemFont,
  "Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

h4{
  font-size: 18px;
  font-weight: 600;
}

.link-font, a.link-font{
  color: #3897F0;
  font-weight: 600;
  cursor: pointer;
}

.denger-link, a.denger-link:hover{
  font-weight: 600;
  color: #ed4956;
  cursor: pointer;
}

// モーダルの設定
.modal .modal-dialog.modal-dialog-centered{
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
.modal-content{
  width: 80%;
  margin: 0 auto;
  text-align: center;
  border: 0px;
  border-radius: 12px;
}
.modal-header{
  padding: 25px;
  border-bottom: 1px solid #efefef;
}
.modal-body{
  padding: 11px;
  border-bottom: 1px solid #efefef;
}

.modal-body-b{
  padding: 11px;
  cursor: pointer;
}

transform: translate 에서 화면 중앙에 모달이 출현하도록 설정하고 있습니다.
.modal-content 의 width를 80%로 하는 것으로, 모바일에서 봐도 모달이 깨끗이 표시된다고 생각합니다.



참고로 Bootstrap을 덮어쓰는 css 파일은 Bootsrap 이후에 로드되도록 설정해야 합니다.

이상으로 완성되었습니다