

タイトルだけではイメージがつかないと思いますので画像を表示します。  
[![サブウィンドウイメージ](https://i.stack.imgur.com/LL3Yn.png)](https://i.stack.imgur.com/LL3Yn.png)

実装イメージはインフォメーションアイコンをタップすると、画像のサブウィンドウを  
表示し、カルーセルでアプリの操作説明を表示させようと考えております。  
また、右上の×アイコンのタップでサブウィンドウが消えます。

ネイティブでは上記UIを実装したことがあるのですが、ONSEN UIで実装可能でしょうか？  
このような実装方法をご存知でしたらご教示のほどお願いします。


CC BY-SA 3.0
2015-09-08T07:31:03.787
16373
2015-09-08T10:16:37.847
9561
question
javascript onsen-ui angularjs cordova
ONSEN UIでカルーセルのサブウィンドウを表示したい。


`ons-dialog`と組み合わせるならこんな感じですかね。  
ダイアログのスタイルは`ons-dialog`配下に`<div
class="dialog">`で設定されるみたいなので、このやり方だとスタイルの調整はちょっと面倒かもしれないです（一応サンプルは大きさと大きさ変更に伴う位置だけ変更しています）。

[code]

    ons.bootstrap()
    
    .controller('DialogController', function($scope) {
      $scope.dialogs = {};
       
      $scope.show = function(dlg) {
        if (!$scope.dialogs[dlg]) {
          ons.createDialog(dlg).then(function(dialog) {
            $scope.dialogs[dlg] = dialog;
            dialog.show();
          });
        }
        else {
          $scope.dialogs[dlg].show();
        }
      }
    });
[/code]

[code]

    ons-dialog.sub .dialog {
      top: 50%;
      left: 50%;
      width: 80%;
      height: 80%;
    }
[/code]

[code]

    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
    
    <ons-page>
      <ons-toolbar>
        <div class="center">Dialog</div>
      </ons-toolbar>
      <ons-list ng-controller="DialogController">
       <ons-list-item ng-click="show('login.html')" modifier="tappable">
         Show SubWindow
       </ons-list-item>
      </ons-list>
    </ons-page>
    
    <ons-template id="login.html">
      <ons-dialog var="dialog" cancelable class="sub">
        <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel">
          <ons-carousel-item style="background-color: gray;">
            <div class="item-label">GRAY</div>
          </ons-carousel-item>
          <ons-carousel-item style="background-color: #085078;">
            <div class="item-label">BLUE</div>
          </ons-carousel-item>
          <ons-carousel-item style="background-color: #373B44;">
            <div class="item-label">DARK</div>
          </ons-carousel-item>
          <ons-carousel-item style="background-color: #D38312;">
            <div class="item-label">ORANGE</div>
          </ons-carousel-item>
        </ons-carousel>
      </ons-dialog> 
    </ons-template>
    
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>
[/code]


CC BY-SA 3.0
2015-09-08T08:23:28.523
16377
2015-09-08T10:16:37.847
2015-09-08T10:16:37.847
3516
3516
16373
answer