This post looks like duplicate, but I think is not. Now you can click `Show box` and show red box, if you want close this box, click outside.

Question: How close this red box on click again `Show box` text except click outside. And how change css style after click e.g. change font-size `Show box` after click 

```js
var myApplication = angular.module('myApp', []);
myApplication.directive('hideLogin', function($document){
  return {
  restrict: 'A',
  link: function(scope, elem, attr, ctrl) {
   elem.bind('click', function(e) {
      e.stopPropagation();
    });
    $document.bind('click', function() {
        scope.$apply(attr.hideLogin);
     })
    }
  }
});

myApplication.controller('hideContainer',function ($scope){
    $scope.openLogin = function(){
        $scope.userLogin = true;
   };
     $scope.hideLoginContainer = function(){
        $scope.userLogin = false;
   };
 });
```

```css
body {
    position:relative;
}

.loginBox {
    z-index:10; 
    background:red; 
    width:100px; 
    height:80px; 
    padding:10px; 
    position:absolute;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<body ng-app="myApp" ng-controller="hideContainer">
  <a href="#" ng-click="openLogin()" hide-login="hideLoginContainer()">Show box</a>
  <div hide-login="hideLoginContainer()" class="loginBox" ng-show="userLogin" style="display:none;">
  </div>
</body>
```