0

お世話になります。
現在monacaを使用してアプリケーションの開発を行っています。

一覧ページから詳細ページに移行した際に、詳細ページをmodalが開いた状態で表示したいのですがなにか方法はありますでしょうか?
自分が書いたコードですと、詳細ページが表示されてからmodalが開きます。

prefNavigator.pushPage('prefResult.html', { animation: 'slide'});
        prefNavigator.on('postpush', function(){
            loadingModal.show();
        });

また、Web APIで読み込んだあとmodalを閉じているのですが、ページ遷移のfadeアニメーションのように、ふわっとmodalを閉じることは可能でしょうか?

1 件の回答 1

0

prepushとjQueryのfadeoutを使えばそれっぽい動きはできると思います。
fadeoutはもっと良い方法があるかもしれませんが。

以下、サンプル

ons.bootstrap();

function fadeout() {
  $("#modal").fadeOut(1000, function() {
    modal.hide();
  });
}
ons.ready(function() {
  navi.on('prepush', function(event) {
    modal.show();
    setTimeout('fadeout()', 1000);
  });
});
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.3/build/css/onsenui.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.3/build/css/onsen-css-components.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.3/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.3/build/js/onsenui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ons-navigator title="Navigator" var="navi">
  <ons-page>
    <ons-toolbar>
      <div class="center">Simple Navigation</div>
    </ons-toolbar>
    <div style="text-align: center">
      <br>
      <ons-button modifier="light" onclick="navi.pushPage('my-page.html', { animation : 'slide' } )">
        Push Page
      </ons-button>
    </div>
  </ons-page>
</ons-navigator>

<ons-template id="my-page.html">
  <ons-page id="my-page">
    <ons-toolbar>
      <div class="center">Modal</div>
    </ons-toolbar>
    <p style="text-align: center">
      <ons-button modifier="light"  onclick="navi.popPage()">Pop Page</ons-button>
    </p>
  </ons-page>
</ons-template>

<ons-modal var="modal" id="modal">
  <ons-icon icon="ion-load-c" spin="true"></ons-icon>
  <br><br>
  Please wait.<br>Fade Out after 1 second.
</ons-modal>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。