ionic 自定义弹框效果


Posted in Javascript onJune 27, 2017

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

思路

  • 利用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 自定义弹框效果

以上所述是小编给大家介绍的ionic 自定义弹框效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
js运动动画的八个知识点
Mar 12 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
js 轮播效果实例分享
Dec 28 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
如何用JS模拟实现数组的map方法
Jul 30 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 Javascript
canvas 中如何实现物体的框选
Aug 05 Javascript
js脚本编写简单刷票投票系统
Jun 27 #Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 #Javascript
详解vue.js的事件处理器v-on:click
Jun 27 #Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 #Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 #Javascript
js获取地址栏参数的两种方法
Jun 27 #Javascript
React组件之间的通信的实例代码
Jun 27 #Javascript
You might like
用 php 编写的日历
2006/10/09 PHP
php+oracle 分页类
2006/10/09 PHP
程序员编程十条戒律
2009/07/09 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
javascript常用的方法整理
2015/08/20 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
python编写分类决策树的代码
2017/12/21 Python
基于python操作ES实例详解
2019/11/16 Python
python新手学习使用库
2020/06/11 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
计算机网络及管理学专业求职信
2014/06/05 职场文书
欢迎家长标语
2014/10/08 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
信访工作个人总结
2015/03/03 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书