JQuery onclick - учимся работать с событием

jQuery onclick - это событие клика на элементе, к которому был применен обработчик событий с использованием метода .click() в jQuery.

Пример использования jQuery onclick для открытия модального окна:

HTML:

Открыть модальное окно

  

    ×
    
Модальное окно!
  

CSS:

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.close {
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

JavaScript(jQuery):

$(document).ready(function() {
  // Обработчик клика на кнопке
  $("#openModal").click(function() {
    $(".modal").css("display", "block");  // Открываем модальное окно
  });
  
  // Обработчик клика на кнопке закрытия модального окна
  $(".close").click(function() {
    $(".modal").css("display", "none");  // Закрываем модальное окно
  });
});

Обратите внимание, что события клика на кнопке и на кнопке закрытия модального окна обрабатываются отдельно. При клике на кнопке открывается модальное окно, а при клике на кнопке закрытия модальное окно закрывается. Также используется метод .css() для изменения свойства display элемента .modal, чтобы показать или скрыть модальное окно.

Вывод: jQuery onclick - это мощный инструмент для обработки событий клика на элементах веб-страницы. Он позволяет легко добавлять и удалять обработчики событий, изменять свойства элементов и многое другое. Пример выше демонстрирует использование jQuery onclick для открытия и закрытия модального окна.