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

Answer 2

Onsen UI HTML

<ons-modal ng-click="modal.hide()" var="modal">
   <br>
   <br>Invalid Username or Password.
   <br>
</ons-modal>

Onsen JS显示模态

modal.show();
 //where modal is the var used in ons-modal tag

Answer 3

默认情况下，没有显示对话框的功能，您可以自己创建对话框。

<!DOCTYPE HTML>
<html ng-app="myApp">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsen/css/topcoat-mobile-onsen-ios7.css">
  <style>

    html,body{
      width: 100%;
      height: 100%;
    }

    button#show-dialog-button{
      display:block;
      margin:0 auto 0 auto;
    }

    div#ons-dialog{
      display:block;          
      width: 280px;
      height: 280px;
      margin:auto;
      border-radius:8px;
      background:#FEFEFE;        
      box-shadow:1px 1px 10px #333333;

      transition: all cubic-bezier(0.1, 0.9, 0.1, 1) 1s;
      -ms-transition: all cubic-bezier(0.1, 0.9, 0.1, 1) 1s;
      -moz-transition: all cubic-bezier(0.1, 0.9, 0.1, 1) 1s;
      -o-transition: all cubic-bezier(0.1, 0.9, 0.1, 1) 1s;
      -webkit-transition: all cubic-bezier(0.1, 0.9, 0.1, 1) 1s;

      transform: translate3d(0, -150%, 0);
      -ms-transform: translate3d(0, -150%, 0);
      -moz-transform: translate3d(0, -150%, 0);        
      -o-transform: translate3d(0, -150%, 0);
      -webkit-transform: translate3d(0, -150%, 0);    
    }   

    button#show-dialog-button:focus + div#ons-dialog{
      transform: translate3d(0, 20%, 0);
      -ms-transform: translate3d(0, 20%, 0);
      -o-transform: translate3d(0, 20%, 0);
      -moz-transform: translate3d(0, 20%, 0);
      -webkit-transform: translate3d(0, 20%, 0);
    }

    /*
    For before Android 4.3, please enable the lines below.
    button#show-dialog-button:hover + div#ons-dialog{
      transform: translate3d(0, 20%, 0);
      -ms-transform: translate3d(0, 20%, 0);
      -o-transform: translate3d(0, 20%, 0);
      -moz-transform: translate3d(0, 20%, 0);
      -webkit-transform: translate3d(0, 20%, 0);
    }
    */
    div#ons-dialog-header{
      height:32px;          
      border-bottom:1px solid #CECECE;
      text-align : center;
    }
    span#dialog-header-text{
      font-weight: bold;
      line-height:32px;
      opacity:0.6;        
    }
    div.box-for-3items{
      display: box;
      display:-ms-box;        
      display:-moz-box;
      display:-o-box;
      display:-webkit-box;        

      box-align:center; 
      -ms-box-align:center;
      -moz-box-align:center;
      -o-box-align:center;
      -webkit-box-align:center;        

      -box-pack:center;
      -ms-box-pack:center;
      -moz-box-pack:center;
      -o-box-pack:center;
      -webkit-box-pack:center;        

      width: 100%
      color: #CECECE;
    }
    div.box-for-3items div.item-wrapper{
      width:60px;
      height:60px;
      margin:10px 10px 10px 10px;
      text-align : center;
      opacity:0.6;      
    }
   div.box-for-3items div.item-wrapper span{
      font-size:12px;
   }

   div.box-for-3items div.item-wrapper i{
      font-size:36px;
   }
</style>
</head>
<body>
<div class="page">
  <div class="topcoat-navigation-bar">
    <div style="float:left" class="topcoat-navigation-bar__item left quarter">
      <span class="topcoat-icon-button--quiet topcoat-navigation-bar__line-height">
        Left
      </span>
    </div>
    <div style="float:left" class="topcoat-navigation-bar__item center half">
      <span class="topcoat-navigation-bar__title topcoat-navigation-bar__line-height">
        Dialog
      </span>
    </div>
    <div style="float:left" class="topcoat-navigation-bar__item right quarter">
      <span class="topcoat-icon-button--quiet topcoat-navigation-bar__line-height">
        Right
      </span>
    </div>
  </div>
  <br/>
  <button id="show-dialog-button" class="topcoat-button">
    Show Dialog
  </button>

  <div id="ons-dialog">
    <div id="ons-dialog-header">
      <span id="dialog-header-text">
        Action
      </span>
    </div>
    <div class="box-for-3items">
      <div class="item-wrapper">
        <i class="fa fa-play topcoat-icon-button--quiet">
        </i>
        <br/>
        <span>
          play
        </span>
      </div>
      <div class="item-wrapper">
        <i class="fa fa-pause topcoat-icon-button--quiet">
        </i>
        <br/>
        <span>
          Pause
        </span>
      </div>
      <div class="item-wrapper">
        <i class="fa fa-stop topcoat-icon-button--quiet">
        </i>
        <br/>
        <span>
          Stop
        </span>
      </div>
    </div>
    <div class="box-for-3items">
      <div class="item-wrapper">
        <i class="fa fa-forward topcoat-icon-button--quiet">
        </i>
        <br/>
        <span>
          Forward
        </span>
      </div>
      <div class="item-wrapper">
        <i class="fa fa-fast-forward topcoat-icon-button--quiet">
        </i>
        <br/>
        <span>
          Fast
        </span>
      </div>
      <div class="item-wrapper">
        <i class="fa fa-step-forward topcoat-icon-button--quiet">
        </i>
        <br/>
        <span>
          Step
        </span>
      </div>
    </div>
    <div class="box-for-3items">
      <div class="item-wrapper">
        <i class="fa fa-backward topcoat-icon-button--quiet">
        </i>
        <br/>
        <span>
          Back
        </span>
      </div>
      <div class="item-wrapper">
        <i class="fa fa-fast-backward topcoat-icon-button--quiet">
        </i>
        <br/>
        <span>
          Fast
        </span>
      </div>
      <div class="item-wrapper">
        <i class="fa fa-step-backward topcoat-icon-button--quiet">
        </i>
        <br/>
        <span>
          Step
        </span>
      </div>
    </div>
  </div>
  <div class="topcoat-tab-bar" style="position:absolute;bottom:0;">
    <label class="topcoat-tab-bar__item">
      <input type="radio" name="tab-bar-a" checked="checked">
      <button class="topcoat-tab-bar__button">
        <div class="onsen_tab-bar__label">
          One
        </div>
      </button>
    </label>
    <label class="topcoat-tab-bar__item">
      <input type="radio" name="tab-bar-a">
      <button class="topcoat-tab-bar__button">
        <div class="onsen_tab-bar__label">
          Two
        </div>
      </button>
    </label>
    <label class="topcoat-tab-bar__item">
      <input type="radio" name="tab-bar-a">
      <button class="topcoat-tab-bar__button">
        <div class="onsen_tab-bar__label">
          Three
        </div>
      </button>
    </label>
  </div>
</div>
</body>
</html>

Answer 4

由于我每次建议您在索引页面中创建通用模型时都必须使用模型，因此您可以在每次需要时调用它。以您可以自定义的方式创建此通用模型。这就是我定制的方式。

html

<ons-modal var="OnsNotification" style="background-color:rgba(0, 0, 0, 0.86);">
            <div id="LoadingLoopDiv">
                <ons-icon icon="ion-ios-loop" style="font-size: 25px" spin="true"></ons-icon>
                <br><br>
            </div>
            <div id="CheckMarkDiv" hidden>
                <ons-icon icon="ion-ios-checkmark-outline" style="font-size:50px"></ons-icon>
            </div>
            <label id="NotificationMessage"></label><br /><br />
 </ons-modal>

<强> JS

//until load something
 OnsNotification.show();
 $('#LoadingLoopDiv').fadeIn();
 $('#NotificationMessage').fadeIn();
 $('#NotificationMessage').text("Saving...");

//when successful
 $('#LoadingLoopDiv').fadeOut();
 $('#NotificationMessage').fadeOut();

setTimeout(function () {
      $('#CheckMarkDiv').fadeIn();
      $('#NotificationMessage').text("CheckOut successful");
      $('#NotificationMessage').fadeIn();
}, 500);

setTimeout(function () {
     $('#CheckMarkDiv').fadeOut();
     OnsNotification.hide();
     $scope.homeNavigator.pushPage('page.html', { animation:defaultTransition});                                           
}, 2000);

在Onsen ui打开模态

4 个答案: