Ng-click对不透明度为1的对象不起作用
ng-click doesn't work on objects with opacity:1;
我有一个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;
属性
相关文章:
- JavaScript参数对象不起作用
- Javascript敲除绑定嵌套对象不起作用
- 反应.js - 处于异步数据状态的深层对象不起作用
- 为什么这个对象不起作用
- KnockoutJS - 创建对象不起作用
- Javascript 如果元素不存在返回,则导致对象不起作用
- 通过指令范围传递对象不起作用
- 通过原型扩展数学对象不起作用
- Concat 对象不起作用,或者我需要将值转换为正确的格式
- 使用速记检查未定义的对象不起作用
- 将信息从表单值推送到对象不起作用
- 淘汰:在对象不起作用的情况下进行多选
- 解析函数对Node.js中的promise对象不起作用
- Angularjs指令隔离了对象不起作用的范围+单向数据绑定
- Mongoose - find():搜索选项中的对象不起作用
- 在函数内部生成的对象不起作用,但是传入的对象起作用
- .focus()对克隆对象不起作用
- Ng-click对不透明度为1的对象不起作用
- Javascript对象不起作用
- 将绑定的数据推入对象不起作用