1. yukiji

    Posted

    yukiji
Changes in title
+Bootstrapをカスタムしてインスタ(instagram)みたいなお洒落なモーダルを作る。
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,123 @@
+# はじめに
+
+Railsで作ったWEBアプリケーション[fitness innovator](http://52.194.24.80/)
+
+instagramを見ながら作っていたらinstagramみたいになりました。
+
+インスタっていちいちオシャレなので、モーダルも真似しちゃいました。
+
+Bootstrapの導入方法に関しては、ググれば沢山出てくるので今回は割愛します。
+
+今回はこういうのを作っていきます。
+
+<img width="729" alt="スクリーンショット 2019-04-23 12.23.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335670/5c665d24-a86b-d83b-955f-886202c146b4.png">
+
+## Bootstrap4のデフォルトのモーダル
+
+<img width="913" alt="スクリーンショット 2019-04-23 12.23.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335670/c8348490-19e5-b55f-96df-972bd9ed538c.png">
+
+上からフワッと出てくるやつです。
+
+こいつをカスタムしていきます。
+
+## HTML
+
+```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
+
+```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%にすることで、モバイルで見てもモーダルが綺麗に表示されると思います。
+
+
+<img width="421" alt="スクリーンショット 2019-04-23 12.34.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335670/24c3b6de-b089-7017-7fed-807dfb6e75db.png">
+
+
+以上で完成です:v: