ionic 自定义弹框效果

 更新时间:2017年06月27日 14:06:18   作者:kettoa  
这篇文章主要介绍了ionic 自定义弹框效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下

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

思路

  • 利用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 自定义弹框效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • BOM系列第二篇之定时器requestAnimationFrame

    BOM系列第二篇之定时器requestAnimationFrame

    这篇文章主要介绍了BOM系列第二篇之定时器requestAnimationFrame 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • JavaScript插件化开发教程 (三)

    JavaScript插件化开发教程 (三)

    前面我们学习了jQuery的方式开发插件,讲诉的都是些基础的理论知识,今天开始,我们就来实战一下,学习开发自己的插件库。
    2015-01-01
  • JS中的THIS和WINDOW.EVENT.SRCELEMENT详解

    JS中的THIS和WINDOW.EVENT.SRCELEMENT详解

    对于js初学着必须理解this和srcElement的应用,这也是面试中经常考到的。下面我们就通过几个示例来详细了解下
    2015-05-05
  • JS事件添加和移出的兼容写法示例

    JS事件添加和移出的兼容写法示例

    这篇文章主要介绍了JS事件添加和移出的兼容写法,结合实例形式分析了javascript针对不同浏览器实现实现添加与移除事件的相关技巧与使用方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 跟我学习javascript的最新标准ES6

    跟我学习javascript的最新标准ES6

    跟我学习javascript的最新标准ECMAScript 6,ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 浅谈JavaScript 代码简洁之道

    浅谈JavaScript 代码简洁之道

    这篇文章主要介绍了浅谈JavaScript 代码简洁之道,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • JavaScript中数组slice和splice的对比小结

    JavaScript中数组slice和splice的对比小结

    相信对很多学习JavaScript语言的人来说,都会经常搞不清slice和splice这两个方法。它们虽然名称相似,但是功能却完全不同。所以这篇文章就给大家详细整理了关于JavaScript中数组slice和splice的对比,有需要的可以参考学习。
    2016-09-09
  • 谈一谈javascript中继承的多种方式

    谈一谈javascript中继承的多种方式

    本文就和大家谈一谈javascript中的继承,什么是继承,继承的作用,以及js继承的实现代码,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JavaScript中的数据类型有哪些

    JavaScript中的数据类型有哪些

    本文介绍了JavaScript中的八种数据类型:Undefined、Null、Boolean、Number、String、Symbol、BigInt和Object,基础数据类型存储在栈内存中,而引用数据类型存储在堆内存中,每种数据类型都有其特定的用途和特性
    2025-01-01
  • js实现适配移动端的拖动效果

    js实现适配移动端的拖动效果

    这篇文章主要为大家详细介绍了js实现适配移动端的拖动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01

最新评论