I have a Angular
project where I tried to make a modal dialog window for login.
However the ng-click
elements inside my modal doesn't fire the call. All the ones which is outside my modal works like they should.
How can this be?
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');
};
...
});
and a JsFiddle in order for you guys to play around with ^^
The problem comes from your CSS actually:
pointer-events: none;
Events are not triggered in your div
, thus not firing the click event
on your button
.
I have created a JSFiddle to make a comparison with and without the pointer-events: none;
property.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.