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 相关文章推荐
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
javascript 自定义事件初探
Aug 21 Javascript
js 操作符实例代码
Oct 24 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
Jquery倒计时源码分享
May 16 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 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/11/26 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
react实现菜单权限控制的方法
2017/12/11 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
python中enumerate的用法实例解析
2014/08/18 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
详解Python文本操作相关模块
2017/06/22 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
python怎么判断素数
2020/07/01 Python
python实现学生管理系统开发
2020/07/24 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
最新创业融资计划书
2014/01/19 职场文书
机关作风建设自查报告
2014/10/22 职场文书
毕业论文致谢范文
2015/05/14 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书