您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關ionic如何實現(xiàn)自定義彈框效果的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
思路
利用ionic自帶的彈框$ionicPopup。
隱藏頭部和尾部,只保留body部分
在利用templateUrl或者template,引入需要的模板
代碼
$ionicPopup.show({ cssClass:'team-popup', template: "<div class='list popup-form'>" + "<div class = 'form-title'>{{tempItem.name}}</div>" + "<div class='form-content'>" + "<div class='input-name'>input1:</div>" + "<div class='input-area'><input type='number' placeholder='10.00' ng-model='tempItem.input1'></div>" + "</div>" + "<div class='form-content'>" + "<div class='input-name'>input2:</div>" + "<div class='input-area'><input type='number' ng-model='tempItem.input2'></div>" + "</div>" + "<div class='form-button'>" + "<button class='button wyl-left-button' ng-click='fnClosePopup()' >cancel</button>" + "<button class='button wyl-right-button' ng-click='fnExchangeGoods()' >submit</button>" + "</div>" + "</div>", 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%; }
效果
感謝各位的閱讀!關于“ionic如何實現(xiàn)自定義彈框效果”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。