В веб-разработке кнопки закрытия окон являются важным элементом, предоставляющим пользователям удобный способ закрытия окон или всплывающих окон. В этой статье мы рассмотрим несколько методов создания кнопок закрытия окон в HTML. Мы рассмотрим различные подходы с использованием HTML, CSS и JavaScript, попутно предоставляя примеры кода.

Метод 1: использование простой ссылки HTML
Один из самых простых способов создать кнопку закрытия окна — использовать ссылку HTML. Если для атрибута hrefустановлено значение javascript:window.close(), нажатие на ссылку закроет текущее окно.

<a href="javascript:window.close()">Close Window</a>

Метод 2: использование JavaScript window.close()
Вы также можете прикрепить прослушиватель событий к HTML-элементу, например кнопке, для запуска window.close( )при нажатии.

<button onclick="window.close()">Close Window</button>

Метод 3: использование JavaScript window.open()и window.close()
Вы можете создать кнопку закрытия окна, которая открывает новое окно, а затем закроет его сразу. Этот подход полезен, если вы хотите отобразить дополнительный контент перед закрытием окна.

<button onclick="var win = window.open('about:blank'); win.close();">Close Window</button>

Метод 4. Использование JavaScript с пользовательской функцией
Если вы предпочитаете использовать пользовательскую функцию JavaScript, вы можете определить функцию, которая вызывает window.close(), а затем прикрепить ее к HTML-элемент.

<button onclick="closeWindow()">Close Window</button>
<script>
  function closeWindow() {
    window.close();
  }
</script>

Метод 5: использование стилей CSS
Вы можете создать кнопку закрытия окна с помощью HTML и CSS, придав элементу

<div class="close-button"></div>
<style>
  .close-button {
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    cursor: pointer;
  }
</style>