이번 글에서는 아이오닉 커스텀 팝업 효과를 주로 소개하는데, 매우 좋고 참고할만한 가치가 있는 친구들이 있으니 참고하시면 됩니다.
작업 과정에서 커스텀 팝업이 필요한 경우가 많습니다. 따라서 학습이 쉽도록 내용을 다음과 같이 구성하였습니다. 부적절한 내용이 있으면 바로잡아주세요!
Idea
ionic과 함께 제공되는 팝업 상자인 $ionicPopup을 사용하세요.
머리와 꼬리를 숨기고 몸통 부분만 유지
templateUrl 또는 템플릿을 사용하여 필수 템플릿을 도입하세요
code
$ionicPopup.show({ cssClass:'team-popup', template: "<p class='list popup-form'>" + "<p class = 'form-title'>{{tempItem.name}}</p>" + "<p class='form-content'>" + "<p class='input-name'>input1:</p>" + "<p class='input-area'><input type='number' placeholder='10.00' ng-model='tempItem.input1'></p>" + "</p>" + "<p class='form-content'>" + "<p class='input-name'>input2:</p>" + "<p class='input-area'><input type='number' ng-model='tempItem.input2'></p>" + "</p>" + "<p 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>" + "</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%; }
효과
위 내용은 아이오닉 커스텀 팝업박스 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!