ionischer benutzerdefinierter Popup-Effekt

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%;
}

Effekt

Das Obige ist der vom Herausgeber eingeführte ionische benutzerdefinierte Popup-Effekt, wenn Sie Fragen haben Bitte hinterlassen Sie mir eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der Script House-Website bedanken!

Das obige ist der detaillierte Inhalt vonionischer benutzerdefinierter Popup-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!