Close button in html-CodePudding

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  data-closable="slide-out-up">
  <button  aria-label="Dismiss alert" type="button" data-close>
        <span aria-hidden="true"><i >X</i></span>
      </button>
</div>

CodePudding user response：

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  data-closable="slide-out-up">
    <button  aria-label="Dismiss alert" type="button" data-close onclick="document.getElementById('modalWindow').style.display='none';">
      <span aria-hidden="true"><i >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

CodePudding user response：

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

instead:

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

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

use:

  <input type="checkbox"  aria-label="Dismiss alert" data-close>
    <span aria-hidden="true"><i >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;
}