Ng-click对不透明度为1的对象不起作用

ng-click doesn't work on objects with opacity:1;

本文关键字:对象 不起作用 不透明度 Ng-click      更新时间:2023-09-26

我有一个Angular项目,我试图使一个模态对话框窗口登录。

然而,我的模态中的ng-click元素不触发调用。所有那些在我的模态之外的工作都像他们应该的那样。

这是怎么回事?


app.css

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}
.modalDialog > div {
    width: 50%;
    min-height: 50%;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #F5F5F0);
    background: -webkit-linear-gradient(#fff, #F5F5F0);
    background: -o-linear-gradient(#fff, #F5F5F0);
}


navbar.html

<div class="navigationbar" ng-controller="NavbarCtrl">
    ...
    <a href="#loginModal" ng-click="hello()"></a>     <!-- Works like a charm -->
    ...
    <div id="loginModal" class="modalDialog">
        <div>
            <div class="col-sm-12">
                <form>
                    <div>
                        <button class="btn btn-inverse btn-lg btn-login" ng-click="hello()">
                            Login
                        </button>     <!-- works like shite in high heels -->
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


navbar.controller.js

'use strict';
angular.module('lunorthApp')
    .controller('NavbarCtrl', function ($scope, $location, Auth, $window) {
        ...
        $scope.hello = function(){
            console.log('hello');
        };
        ...
    });


和JsFiddle是为了让你们摆弄^^

问题实际上来自于你的CSS:

pointer-events: none;

事件不会在你的div中触发,因此不会在你的button上触发click event

我已经创建了一个JSFiddle来比较有和没有pointer-events: none;属性