ionischer benutzerdefinierter Popup-Effekt-js-Tutorial-php.cn

ionischer benutzerdefinierter Popup-Effekt

陈政宽～

Freigeben： 2017-06-28 15:34:56

Original

1392 Leute haben es durchsucht

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:&#39;team-popup&#39;,
    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
   });

Nach dem Login kopieren

/**弹出窗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%;
}

Nach dem Login kopieren

Effekt

ionischer benutzerdefinierter Popup-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!