ionic 自定义弹框效果

ionic 自定义弹框效果

在工作过程中往往需要自定义的弹框。因此，将内容整理如下，以方便学习。若有不当之处，敬请斧正！

思路

利用ionic自带的弹框$ionicPopup。

隐藏头部和尾部，只保留body部分

在利用templateUrl或者template，引入需要的模板

代码

$ionicPopup.show({

cssClass:'team-popup',

template: "

"

"

"

"

"

"

"

"

"

"

"cancel" +

"submit" +

"

http://"

scope: $scope

});

/**弹出窗popup 无titlecss*/

.team-popup .popup-head{

display: none;

}

.team-popup vOqfy.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 自定义弹框效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。