文档章节

自定义popup写法以及点击backdrop隐藏popup的directive写法

Simon_ITer
 Simon_ITer
发布于 2016/01/29 22:39
字数 701
阅读 250
收藏 2

引言

网上提供的popup例子使用的是template,使用title、subtitle等参数来设置样式,但是这样在很多时候并不能满足我们的需求的(ionic自带样式本身就丑),所以这时候可以通过templateURL来写出我们想要的样式。

效果

原样式:

自定义后的样式(不敢说有多好看,但是至少还是有点进步的):

实现

一.建立一个popup.html文件

里面编写自己想要的内容与效果,由于我这里就一个标题和input框,所以代码量较少。如下:

<style>
.popup-title{
   padding-bottom: 10px;
}

</style>
<div>请填写快速按钮标题</div>
<input type="text" />

二.在JS中调用此popup文件

代码为:

$scope.myPopup = $ionicPopup.show({           
    templateUrl: 'templates/sale/modal/popup.html',
    scope: $scope,
    buttons: [{ //Array[Object] (可选)。放在弹窗footer内的按钮。
        text: '取消',
        type: 'sale-cancel',
        onTap: function(e) { 
            $scope.myPopup.close();  
        } 
    }, {
        text: '确定',
         type: 'sale-sure',
               onTap: function(e) { 
            console.log(e)
        }
    }]
});

可以看到,button里的内容也是可以自定义的,type对应的就是button的样式class,所以这里需要编写一个css文件,我修改了一下popup的border-radius,这个是需要覆盖源码的,请知悉。代码如下:

.popup-container .popup {
    border-radius: 8px;
}
.popup-buttons {
    padding: 0;
    min-height: auto;
}
.sale-cancel {
    border-bottom-left-radius: 8px!important;
    margin-right: 0!important;
}
.sale-sure {
    border-bottom-right-radius: 8px!important;
    background-color: #EABA82;
    color: white!important;
}

注:使用!important的目的是使其样式优先级最高,并且在状态为active时不改变对应的样式。

Directive

       在我个人的操作习惯来说,弹起这个弹窗的时候,如果我想取消本次弹窗,我是想点击这个弹窗的外部就可以取消,而不是说非要点击那个取消按钮,并且现在有很多的大屏手机,一般单手操作的话是不容易点击到取消的。

       但是在ionic的popup组件中是没有这样的效果的,所以我们需要自己去实现这个效果,这里使用directive来实现。

一.在app.js中定义一个module来存储这个directive,如下:

var saleDrective = angular.module('saleDrective', ['saleDrective.directives']);

二.建立js文件,加入以下代码:

angular.module('saleDrective.directives', []) 
  .directive('rjCloseBackDrop', [function() {
    return {     
        scope: false,
             restrict: 'A',
             replace: false,
             link: function($scope, iElm, iAttrs, controller) {       
            var htmlEl = angular.element(document.querySelector('html'));       
            htmlEl.on("click", function(event) {         
                if (event.target.nodeName === "HTML" & $scope.myPopup) {
                    $scope.myPopup.close();
                }       
            });     
        }   
    }; 
}])

这里的module名字需要与app.js定义的保持一致。Directive是直接操作dom的,判断当前popup为显示状态时(即下面的if语句,$scope.myPopup是在controller中定义popup名字,在上面代码中有写出来)点击外围backdrop即close当前popup。

三.在HTML中引入这个directive

在使用到这个popup对应的页面中的content上加入rj-close-back-drop如:

四.在index中引入这个js文件

现在就大功告成了,希望对大家有帮助。

 

 

 

 

© 著作权归作者所有

Simon_ITer
粉丝 73
博文 41
码字总数 27876
作品 0
上海
前端工程师
私信 提问
Ionic中自定义popup写法以及点击backdrop隐藏popup的directive写法

网上提供的popup例子使用的是template,使用title、subtitle等参数来设置样式,但是这样在很多时候并不能满足我们的需求的(ionic自带样式本身就丑),所以这时候可以通过templateURL来写出我...

Simon_ITer
2016/09/20
66
0
js实现数据加载,页面遮罩效果

实现数就加载前显示遮罩层,数据加载完隐藏遮罩层,此功能适用于数据加载,数据导入,数据导出使用场景 对应的js文件内容: !(function() { var modules = {}; function require(id) { var ...

brave666
2016/09/30
581
0
Windows Phone 7 开发小技巧

1.使用Popup来实现自定义的弹出效果。Popup控件弹出的块会一直在屏幕的最前方,所以使用Popup可以实现各种各样的弹出框,并且给了你极大的自定义的空间,很多第三方的弹出框控件的原理其实就...

junwong
2012/02/28
806
0
手把手教你实现微信小程序中的自定弹窗

前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 ...

飞翔的熊blabla
2018/08/27
0
0
垂直居中的总结

无需固定高度的方式 用以下的方式,可以适应任何高度的div实现居中。 方式1:使用jquery.popup.js插件 本人封装了一个名为jquery.popup.js的插件,主要是为了弹窗实现居中显示问题,还不错的...

前端届的科比
2015/09/04
48
0

没有更多内容

加载失败,请刷新页面

加载更多

我为什么要写微信公众号

埋一颗种子,细心呵护,静待她枝繁叶茂,葱郁参天 V2论坛上有个帖子【做程序员最重要的还是一定要有自己的作品】,作者写道: 能有一个作品和你的名字联系在一起,应当成为在职业生涯前期着意...

运维咖啡吧
40分钟前
3
0
数据库

数据库架构 数据库架构可以分为存储文件系统和程序实例两大块,而程序实例根据不同的功能又可以分为如下小模块。 1550644570798 索引模块 常见的问题有: 为什么要使用索引 什么样的信息能成...

一只小青蛙
今天
5
0
PHP常用经典算法实现

<? //-------------------- // 基本数据结构算法 //-------------------- //二分查找(数组里查找某个元素) function bin_sch($array, $low, $high, $k){ if ( $low <= $high){ $mid = int......

半缘修道半缘君丶
昨天
5
0
GIL 已经被杀死了么?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/8KvQemz0SWq2hw-2aBPv2Q 花下猫语: Python 中最广为人诟病的一点,大概就是它的 GIL 了。...

豌豆花下猫
昨天
6
0
git commit message form

commit message一般包括3部分:Header、Body、Footer。 <type>(<scope>):<subject>blank line<body>blank line<footer> header是必需的,body、footer可以省略。 header中type、subject......

ninjaFrog
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部