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 相关文章推荐
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
es6中let和const的使用方法详解
Feb 24 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
JAVA/JSP学习系列之七
2006/10/09 PHP
php url路由入门实例
2014/04/23 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
Git命令之分支详解
2021/03/02 PHP
Google 静态地图API实现代码
2010/11/19 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
python使用opencv读取图片的实例
2017/08/17 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
python设置环境变量的作用和实例
2019/07/09 Python
django框架auth模块用法实例详解
2019/12/10 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
网络管理专业求职信
2014/03/15 职场文书
考试保密承诺书
2014/08/30 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
天堂的孩子观后感
2015/06/11 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
《海上日出》教学反思
2016/02/23 职场文书