>웹 프론트엔드 >JS 튜토리얼 >이온 사용자 정의 팝업 효과

이온 사용자 정의 팝업 효과

陈政宽~
陈政宽~원래의
2017-06-28 15:34:561384검색

이번 글에서는 아이오닉 커스텀 팝업 효과를 주로 소개하는데, 매우 좋고 참고할만한 가치가 있는 친구들이 있으니 참고하시면 됩니다.

작업 과정에서 커스텀 팝업이 필요한 경우가 많습니다. 따라서 학습이 쉽도록 내용을 다음과 같이 구성하였습니다. 부적절한 내용이 있으면 바로잡아주세요!

Idea

  • ionic과 함께 제공되는 팝업 상자인 $ionicPopup을 사용하세요.

  • 머리와 꼬리를 숨기고 몸통 부분만 유지

  • templateUrl 또는 템플릿을 사용하여 필수 템플릿을 소개하세요

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


효과

이온 사용자 정의 팝업 효과

위는 에디터가 소개한 아이오닉 커스텀 팝업 효과입니다. 궁금한 사항이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해드리겠습니다. 또한 Script House 웹사이트를 지원해 주시는 모든 분들께 감사의 말씀을 전하고 싶습니다!

위 내용은 이온 사용자 정의 팝업 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.