使用ons-modal打开另一个页面

Question

如何在onsen ui加载此模式后打开另一页 https://onsen.io/reference/ons-modal.html#example

ons.bootstrap();

$(document.body).on("pageinit", '#my-page', function() {
 $("#show-modal", this).click(function() {
  modal.show();
   setTimeout('modal.hide()', 2000);
   });
    });

Answer 1

  

您的观点

<style>
       .loading {
            position: absolute;
            left: 0;
            top: 45%;
            bottom: 0;
            right: 0;
            text-align: center;
            margin: auto;
       }
    </style>

<ons-modal var="modal">
  ...content of your model
</ons-modal>

<ons-navigator>
  <ons-page id="my-page">
    <ons-toolbar>
      <div class="center">Modal</div>
    </ons-toolbar>
    <p style="text-align: center">
      <ons-button id="show-modal" modifier="light">Open Modal</ons-button>
    </p>
    <div id="myDiv" class="loading ng-hide">
          <ons-icon icon="ion-load-c" spin="true"></ons-icon>
  <br>
  <br> Please wait.
  <br>Closing in 2 seconds.
    </div>
  </ons-page>
</ons-navigator>

  

你的js文件

ons.bootstrap();

$(document.body).on("pageinit", '#my-page', function() {
  $("#show-modal", this).click(function() {
    angular.element(document.querySelector('#myDiv')).removeClass('ng-hide');
    setTimeout( function () {angular.element(document.querySelector('#myDiv')).addClass('ng-hide');
                             modal.show();
                                 }, 2000);
  });
});