CODEWITHSUNDEEP
jqueryhtmlcss
N.Car
N.Car

Reputation: 492

Exit modal using css by clicking outside main box

I created this modal popup using only css, however I can only leave it if I click on "X". I want to add the option to leave the modal when the user clicks outside the main box, ie, clicks the grey area.

Any suggestions on how it can be done?

Is it necessary to use JQuery? So far the code is really simple, that's why I'm trying to avoid it.

  <div ng-controller="demoCtrl">
    <a href="#openModal">Open Modal</a>
    <div id="openModal" class="modalDialog">
      <div class="content">
        <a href="#close">X</a>
        <h1>Modal Box</h1>
        <button ng-click="changeState()">Show Client</button>
        <div ng-if="client.state">{{client.name}}</div>
      </div>
    </div>
  </div>

Plunker to check the whole thing

Thank you :)

Upvotes: 3

Views: 315

Answers (2)

Temani Afif
Temani Afif

Reputation: 272955

You can add another a element that will behave as a layer and when you click on it, it will hide the modal:

// Code goes here
angular.module("demo", []);

angular
  .module("demo")
  .controller("demoCtrl", ["$scope", function($scope) {
    $scope.client = {
      name: "John Doe",
      state: false
    };
    $scope.changeState = function() {
      $scope.client.state = !$scope.client.state;
    }
  }]);
/* Styles go here */

.modalDialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99;
  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;
}


/* CSS of new element */

.close {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
/*   */
.modalDialog .content {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 15px;
  border-radius: 5px;
  background-color: white;
}
<div ng-controller="demoCtrl">
  <a href="#openModal">Open Modal</a>
  <div id="openModal" class="modalDialog">
    <!-- New element here -->
    <a href="#close" class="close"></a>
    <div class="content">
      <a href="#close">X</a>
      <h1>Modal Box</h1>
      <button ng-click="changeState()">Show Client</button>
      <div ng-if="client.state">{{client.name}}</div>
    </div>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

Upvotes: 2

Kaddath
Kaddath

Reputation: 6151

You can add a link behind the content that takes all window size, and you set the same href than your close button:

HTML:

  <div ng-controller="demoCtrl">
    <a href="#openModal">Open Modal</a>
    <div id="openModal" class="modalDialog">
      <a class="fullSizeBlock" href="#close">&nbsp;</a>
      <div class="content">
          <a href="#close">X</a>
          <h1>Modal Box</h1>
          <button ng-click="changeState()">Show Client</button>
        <div ng-if="client.state">{{client.name}}</div>
      </div>
    </div>
  </div>

CSS added (cursor is not mandatory, you can leave default link pointer):

.fullSizeBlock{
  cursor: initial;
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}

Upvotes: 2

Related Questions