'Close button in html

I am new to HTML and CSS. I'm trying to design an closable dialog box with an X button.

I arrive to see the X button in the dialog text upper bar, however, I can't close it. Every time I click the button, it stays where it is.

How could I solve this problem?

.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover {
  opacity: 1;
}

.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
<div class="modal-header" data-closable="slide-out-up">
  <button class="close" aria-label="Dismiss alert" type="button" data-close>
        <span aria-hidden="true"><i class="fa fa-window-close">X</i></span>
      </button>
</div>
htmlcssbutton


Solution 1:[1]

The easiest way is to use JavaScript onclick event handler for the <button> element like this

onclick="document.getElementById('modalWindow').style.display='none';"

Where modalWindow is an id of you modal window. See an example bellow: 

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover {
  opacity: 1;
}

.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
<div id="modalWindow">
  <div class="modal-header" data-closable="slide-out-up">
    <button class="close" aria-label="Dismiss alert" type="button" data-close onclick="document.getElementById('modalWindow').style.display='none';">
      <span aria-hidden="true"><i class="fa fa-window-close">X</i></span>
    </button>
  </div> 
  <div>
  This is modal window text....
  </div>
</div>
See https://developer.mozilla.org/ru/docs/Web/API/Document/getElementById for pure JavaScript DOM handling

Solution 2:[2]

You can get the result you want by using CSS :checked selector.

instead:

  <button class="close" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true"><i class="fa fa-window-close">X</i></span>
  </button>

.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

use:

  <input type="checkbox" class="close" aria-label="Dismiss alert" data-close>
    <span aria-hidden="true"><i class="fa fa-window-close">X</i></span>
  </input>

.close:checked {
//when closed input checked run (e.g. change the display property of the menu you want to show):
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sergey Beloglazov
Solution 2 CodErdal

Related Questions