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

相关文章

  • SyntaxHighlighter 3.0.83使用笔记

    SyntaxHighlighter 3.0.83使用笔记

    本文主要介绍了SyntaxHighlighter的配置及代码的使用,并附上在博客园中使用SyntaxHighlighter 3.0.83的案例,非常实用,这里推荐给大家。
    2015-01-01
  • javascript异步编程的六种方式总结

    javascript异步编程的六种方式总结

    这篇文章主要介绍了javascript异步编程的六种方式总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • 一文解析JavaScript中的闭包和内存泄漏

    一文解析JavaScript中的闭包和内存泄漏

    这篇文章将深入探讨闭包和内存泄漏之间的关系,并通过具体的代码案例来证明闭包并不必然导致内存泄漏,感兴趣的小伙伴可以跟随小编一起了解一下
    2023-06-06
  • JS+CSS实现淡入式焦点图片幻灯切换效果的方法

    JS+CSS实现淡入式焦点图片幻灯切换效果的方法

    这篇文章主要介绍了JS+CSS实现淡入式焦点图片幻灯切换效果的方法,实例分析了javascript操作图片、css等元素实现幻灯片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • echarts柱状堆叠图实现示例(图例和x轴都是动态的)

    echarts柱状堆叠图实现示例(图例和x轴都是动态的)

    一些柱形图在数据量比较多的时候,横向排列受到挤压,导致柱形图,变的非常细,影响整体的效果,下面这篇文章主要给大家介绍了关于echarts柱状堆叠图(图例和x轴都是动态的)的相关资料,需要的朋友可以参考下
    2023-04-04
  • layui 点击重置按钮, select 并没有被重置的解决方法

    layui 点击重置按钮, select 并没有被重置的解决方法

    今天小编就为大家分享一篇layui 点击重置按钮, select 并没有被重置的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • javascript中使用class和prototype的区别小结

    javascript中使用class和prototype的区别小结

    本文将介绍在JavaScript何时使用class以及何时使用prototype,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • 前端项目中报错Uncaught (in promise)的解决方法

    前端项目中报错Uncaught (in promise)的解决方法

    最近在做项目的时候控制台报了一个错Uncaught(in promise) false,这篇文章主要给大家介绍了关于前端项目中报错Uncaught (in promise)的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • 详解CocosCreator项目结构机制

    详解CocosCreator项目结构机制

    这篇文章主要介绍了详解CocosCreator项目结构机制,只有了解这些机制后,才能更好的进行项目开发,避免潜在错误,并且快速的除错
    2021-04-04
  • 原生JS实现相邻月份日历

    原生JS实现相邻月份日历

    这篇文章主要介绍了原生JS如何实现相邻月份日历,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-10-10

最新评论