There are two types of [pop-up windows] in ionic (as shown in the following figure), $ionicModal and $ionicpopup;

Source: http://www.cnblogs.com/CheeseZH/

$ionicModal is the full page;

$ionicPopup is (Dialog) dialog box style, directly with JavaScript set some parameters of the dialog box, usually used for notification messages, confirmations and other functions;

$ionicModal(Chinese translation as ' model ', feeling or directly called using modal to be better. ）

The model is a content panel that can temporarily cross the user's main view. Typically used to select or edit an item. Note that you need to put the contents of the model modal inside a div with a class.

For instance, what is modal? ：

Login or register the user Agreement of the page (Figure 1), after clicking on "User Agreement", will pop up the user Agreement specific content (Figure 2), this place can use modal to implement. Figure 3 shows the source code of the login page (these are generated by ionic itself) after application is running, ignoring the other information, just look at the Red 1 and Red 2 I marked, the current Red 2 element is hide, and when we click on "User Agreement", the Red 2 will go from "Hide "Into" actived ", this time we see the contents of Figure 2.

Figure 1 Login Interface User Agreement

Figure 2 User Agreement details (Modal)

Figure 3 Viewing the Web page source code

How to implement modal?

First you have to have your own modal HTML code, note that you need to put the contents of the model into a div with a modal class. ：

<script id= "my-modal.html" type= "text/ng-template" >  <div class= "modal" >    <ion-header-bar >      
Then write your own JS code (in fact, is the ANGULARJS code)
This section requires attention to the following points:
(1) Do not forget the function parameter $ionicmodal, otherwise will error (with the browser debugging tool F12 can see)
(2) Use Fromtemplateurl to generate your own modal in HTML code (based on the ID) on the HTML page (that is, when the page is opened, there is no Red 2 div in Figure 3, when the Fromtemplateurl is called, Will generate this div, and each call will generate a Red 2 div Oh, so write code when the logic is designed to be careful to remove () in time. ）；
(3) Openmodal and Closemodal functions are easy to understand, and this estimation is the most commonly used method of modal;
(4) $scope. $on for richer operations (without $scope, of course.) $on can also do a lot of work. ）；
1 angular.module (' testApp ', [' Ionic ']) 2. Controller (' Mycontroller ', function ($scope, $ionicModal) {3   $ Ionicmodal.fromtemplateurl (' modal.html ', {4     scope: $scope, 5     Animation: ' slide-in-up ' 6   }). Then ( function (modal) {7     $scope. Modal = modal; 8   }), 9   $scope. Openmodal = function () {ten     $scope. Modal.show () , one   };12   $scope. closemodal = function () {     $scope. modal.hide ();   };15   //When we're done with the model, clear it!   $scope. $on (' $destroy ', function () {     $scope. Modal.remove ()   ); +   //When the model is hidden, perform the action   $scope. $on (' Modal.hide ', function () {+/     /execute action   ]), and/   /When moving the model, perform the action of the   $scope. $on (' Modal.removed ', function () {     //execute action (+   }); 27});
Tell me more about the method of creation
You can use a string or a URL:
fromTemplate(templateString, options)
templateStringis a string type that stores the contents of the model;
Options is an object that stores an option for the Ionicmodal#initialize method;
Returns a modal controller instance;
An Options object has properties:

 
 

  
  
 
   
{object=}范围the range of subclasses. Default: Creates a $rootscope subclass.
 
   
{string=}动画animations with display or hide. Default: ' Slide-in-up '
 
   
{boolean=}第一个输入框获取焦点whether the first INPUT element of the model gets the focus automatically when it is displayed. Default: False.
 
   
{boolean=}Backdropclicktoclose ' whether to close the model when clicking on the background. Default: True.
 
  
 
 
fromTemplateUrl(templateUrl, options)
Templateurl is a string type that points to the URL of the template to be loaded;
The options are the same as the top;
Returns a Promise object that points to an modal controller instance;
A more intuitive use of URL creation:
1 $ionicModal. Fromtemplateurl (' templates/hello.html ', {///modal window option 2     scope: $scope, 3     animation: ' Silde-in-up ' 4}). Then (function (modal) {5      $scope. Modal = modal;6})
The hello.html contents under the Templates directory are as follows:
1 <ion-modal-view>2     <ion-header-bar class= "bar-energized" >3         
Ionic [pop-up window] There are two (as shown), $ionicModal and $ionicpopup;