在Onsen ui打开模态

Question

如何在Onsen ui中插入模态或对话框？

的index.html

<ons-screen>
<ons-navigator ng-controller="Principal" title="Lista DC" right-button-icon="fa fa-lg fa-bars" on-right-button-click="novoProduto()">

principal.js

function Principal($scope, Data){
    $scope.items = Data.items;  

    $scope.showDetail = function(index){
        var selectedItem = Data.items[index];
        Data.selectedItem = selectedItem;
        $scope.ons.navigator.pushPage('detail.html', { title : selectedItem.title });
    }

    $scope.novoProduto = function(){
        $.mobile.changePage( "page.html", { role: "dialog" } );
    }
}

Answer 1

我不知道你有什么版本,这可能是一个新功能.

但你可以这样做:

<ons-button id="show-modal" class="ng-isolate-scope button effeckt-button button--light slide-left" modifier="light" onclick="modal.show('modal')">
   <span class="label ons-button-inner">
     <span class="ng-scope">Open Modal</span>
   </span>
   <span class="spinner button__spinner button--light__spinner"></span>
</ons-button>


<ons-modal var="modal">
<ons-button onclick="modal.hide()">Close</ons-button>
</ons-modal>

非常简单 - 文档:http://onsenui.io/guide/components.html#ons-modal