Commit 5fe93ca887dd697a13a618ad20ed0ecedba31413
1 parent
87c93a0297
Exists in
master
and in
2 other branches
Theme modal
Showing 3 changed files with 133 additions and 7 deletions Side-by-side Diff
app/scripts/controllers/main.js
| ... | ... | @@ -3,7 +3,15 @@ |
| 3 | 3 | app.controller('MainCtrl', function ($scope) { |
| 4 | 4 | $scope.modalTShirtDesign = function() { |
| 5 | 5 | // console.log($('#tshirt-design').length); |
| 6 | - $('#tshirt-design').modal(); | |
| 6 | + $('#tshirt-design').modal( | |
| 7 | + { | |
| 8 | + backdrop: 'static', | |
| 9 | + keyboard: false | |
| 10 | + } | |
| 11 | + ); | |
| 12 | + }; | |
| 13 | + $scope.modalClose = function(){ | |
| 14 | + $('#tshirt-design').modal('hide'); | |
| 7 | 15 | } |
| 8 | 16 | }); |
| 9 | 17 | }); |
app/styles/main.css
| ... | ... | @@ -259,8 +259,48 @@ |
| 259 | 259 | #tshirt-content .tshirt-choice ul li.focus .image{ |
| 260 | 260 | border: 1px solid #ff0000; |
| 261 | 261 | } |
| 262 | +/*MODAL Design*/ | |
| 263 | +#tshirt-design{ | |
| 264 | + background-color: #000; | |
| 265 | +} | |
| 266 | +#tshirt-design .modal-dialog{ | |
| 267 | + width: 75%; | |
| 268 | + margin: 0 auto; | |
| 269 | +} | |
| 270 | +#tshirt-design .modal-dialog .modal-content{ | |
| 271 | + background-color: transparent; | |
| 272 | + border-radius: 0; | |
| 273 | + border: 0; | |
| 274 | +} | |
| 275 | +#tshirt-design .modal-dialog .modal-content .modal-header{ | |
| 276 | + padding: 0 0 10px 0; | |
| 277 | + border-bottom: 0; | |
| 278 | +} | |
| 279 | +#tshirt-design .modal-dialog .modal-content .modal-body{ | |
| 280 | + background-color: #ffffff; | |
| 281 | + padding: 0 0; | |
| 282 | +} | |
| 283 | +#tshirt-design header{ | |
| 284 | + border-bottom: 1px solid #DDDDDD; | |
| 285 | +} | |
| 286 | +#tshirt-design header ul.nav{ | |
| 287 | + padding-left: 0; | |
| 288 | + list-style: none; | |
| 289 | +} | |
| 290 | +#tshirt-design header ul.nav li{ | |
| 291 | + float: left; | |
| 292 | + padding: 10px 15px; | |
| 293 | + border-right: 1px solid #DDDDDD; | |
| 294 | +} | |
| 262 | 295 | |
| 296 | +/*Aside modal*/ | |
| 297 | +.aside{ | |
| 263 | 298 | |
| 299 | +} | |
| 300 | +.aside #choice-design-option{ | |
| 301 | + list-style: none; | |
| 302 | + padding-left: 0; | |
| 303 | +} | |
| 264 | 304 | /* Customize container */ |
| 265 | 305 | @media (min-width: 768px) { |
| 266 | 306 | .container { |
app/views/tshirt-design.html
| 1 | 1 | <!-- Modal --> |
| 2 | 2 | <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> |
| 3 | + | |
| 3 | 4 | <div class="modal-dialog" role="document"> |
| 4 | 5 | <div class="modal-content"> |
| 5 | 6 | <div class="modal-header"> |
| 6 | - <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> | |
| 7 | + <button class="" ng-click="modalClose()">Close</button> | |
| 7 | 8 | </div> |
| 8 | 9 | <div class="modal-body"> |
| 9 | - <h1>Content Design</h1> | |
| 10 | - </div> | |
| 11 | - <div class="modal-footer"> | |
| 12 | - <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> | |
| 13 | - <button type="button" class="btn btn-primary">Save changes</button> | |
| 10 | + <header> | |
| 11 | + <ul class="nav"> | |
| 12 | + <li> | |
| 13 | + <i class="fa fa-jpy" aria-hidden="true"></i> 文字 | |
| 14 | + </li> | |
| 15 | + <li> | |
| 16 | + <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ | |
| 17 | + </li> | |
| 18 | + <li> | |
| 19 | + <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真 | |
| 20 | + </li> | |
| 21 | + <li> | |
| 22 | + <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去 | |
| 23 | + </li> | |
| 24 | + </ul> | |
| 25 | + </header> | |
| 26 | + <section class="tshirt-design-container clearfix"> | |
| 27 | + <div class="aside col-xs-4"> | |
| 28 | + <ul id="choice-design-option"> | |
| 29 | + <li> | |
| 30 | + <div class="title"> | |
| 31 | + <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | |
| 32 | + 文字を追加 | |
| 33 | + </div> | |
| 34 | + <div class="clearfix"> | |
| 35 | + <div class="col-xs-2 text-center"> | |
| 36 | + <i class="fa fa-jpy" aria-hidden="true"></i> | |
| 37 | + </div> | |
| 38 | + <div class="col-xs-10"> | |
| 39 | + 書体を選んでお好きな文字を入力できます | |
| 40 | + </div> | |
| 41 | + </div> | |
| 42 | + </li> | |
| 43 | + <li> | |
| 44 | + <div class="title"> | |
| 45 | + <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | |
| 46 | + イラストやイメージを追加 | |
| 47 | + </div> | |
| 48 | + <div class="clearfix"> | |
| 49 | + <div class="col-xs-2 text-center"> | |
| 50 | + <i class="fa fa-btc" aria-hidden="true"></i> | |
| 51 | + </div> | |
| 52 | + <div class="col-xs-10"> | |
| 53 | + 自由にお使いいただけるデザイン画像をご用意しました | |
| 54 | + </div> | |
| 55 | + </div> | |
| 56 | + </li> | |
| 57 | + <li> | |
| 58 | + <div class="title"> | |
| 59 | + <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | |
| 60 | + 自分の画像・写真を追加 | |
| 61 | + </div> | |
| 62 | + <div class="clearfix"> | |
| 63 | + <div class="col-xs-2 text-center"> | |
| 64 | + <i class="fa fa-jpy" aria-hidden="true"></i> | |
| 65 | + </div> | |
| 66 | + <div class="col-xs-10"> | |
| 67 | + ご自分で用意した画像をアップロードして使えます | |
| 68 | + </div> | |
| 69 | + </div> | |
| 70 | + </li> | |
| 71 | + <li> | |
| 72 | + <div class="title"> | |
| 73 | + <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | |
| 74 | + おすすめデザインを使う | |
| 75 | + </div> | |
| 76 | + <div class="clearfix"> | |
| 77 | + <div class="col-xs-2 text-center"> | |
| 78 | + <i class="fa fa-jpy" aria-hidden="true"></i> | |
| 79 | + </div> | |
| 80 | + <div class="col-xs-10"> | |
| 81 | + おすすめデザインデータをご自由にカスタマイズしてお使いください | |
| 82 | + </div> | |
| 83 | + </div> | |
| 84 | + </li> | |
| 85 | + | |
| 86 | + </ul> | |
| 87 | + </div> | |
| 88 | + <div class="design-contetn col-xs-8"> | |
| 89 | + | |
| 90 | + </div> | |
| 91 | + </section> | |
| 14 | 92 | </div> |
| 15 | 93 | </div> |
| 16 | 94 | </div> |