Ausführliche Erläuterung der Beispiele für benutzerdefinierte ionische Popup-Boxen

In diesem Artikel wird hauptsächlich der ionische benutzerdefinierte Popup-Effekt vorgestellt, der sehr gut ist und einen Referenzwert hat. Freunde, die ihn benötigen, können darauf verweisen

Während des Arbeitsprozesses werden häufig benutzerdefinierte Popups benötigt. Daher sind die Inhalte wie folgt organisiert, um das Lernen zu erleichtern. Wenn etwas unangemessen ist, korrigieren Sie mich bitte!

Ideen

• Verwenden Sie ionics eigene Popup-Box $ionicPopup.

• Kopf und Schwanz ausblenden und nur den Körperteil übrig lassen

• Verwenden Sie templateUrl oder template, um die erforderliche Vorlage einzuführen

Code

$ionicPopup.show({
    cssClass:'team-popup',
    template: "<p class=&#39;list popup-form&#39;>" +
    "<p class = &#39;form-title&#39;>{{tempItem.name}}</p>" +
    "<p class=&#39;form-content&#39;>" +
     "<p class=&#39;input-name&#39;>input1:</p>" +
     "<p class=&#39;input-area&#39;><input type=&#39;number&#39; placeholder=&#39;10.00&#39; ng-model=&#39;tempItem.input1&#39;></p>" +
    "</p>" +
    "<p class=&#39;form-content&#39;>" +
     "<p class=&#39;input-name&#39;>input2:</p>" +
     "<p class=&#39;input-area&#39;><input type=&#39;number&#39; ng-model=&#39;tempItem.input2&#39;></p>" +
    "</p>" +
    "<p class=&#39;form-button&#39;>" +
     "<button class=&#39;button wyl-left-button&#39; ng-click=&#39;fnClosePopup()&#39; >cancel</button>" +
     "<button class=&#39;button wyl-right-button&#39; ng-click=&#39;fnExchangeGoods()&#39; >submit</button>" +
    "</p>" +
    "</p>",
    scope: $scope
   });

/**弹出窗popup 无titlecss*/
.team-popup .popup-head{
 display: none;
}
.team-popup .popup{
 padding: 0;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius:5px;
}
.team-popup .popup-body{
 padding: 0;
 /*overflow-y:scroll;*/
}
/*自定义表单*/
.popup-form{
 font-size:15px
}
.form-title{
 margin: 10px;
 text-align:center
}
.form-content{
 width: 90%;
 height: 36px;
 background-color: white;
 padding-left: 10px;
 margin:10px auto;
 position: relative;
 border-radius: 5px;
}
.form-content input{
 line-height: 36px;
 padding-left:10px
}
.input-name{
 float: left;
 line-height: 36px;
}
.input-area{
 width: 50%;
 float: left;
 height: 36px;
}
.form-button{
 width: 90%;
 height: 36px;
 margin:10px auto;
 position: relative;
}
.form-button button{
 width: 50%;
 border-radius: 5px;
 min-height: 10px;
 height: 100%;
 line-height: 100%;
}

Wirkung

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Beispiele für benutzerdefinierte ionische Popup-Boxen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!