Для открытия CSS-селектора `.popup`, который отвечает за всплывающее окно, с помощью события `onclick` в JavaScript, вы можете использовать метод изменения стиля элемента. Обычно это делается путем добавления или изменения классов, чтобы отображать или скрывать всплывающее окно.
Вот пример, как можно это реализовать:
### HTML
```html
<button id="open-popup">Открыть всплывающее окно</button>
<div class="popup" id="popup-window">
<h2>Это всплывающее окно</h2>
<button id="close-popup">Закрыть</button>
</div>
```
### CSS
```css
.popup {
display: none; /* Изначально скрыто */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
border: 1px solid #ccc;
padding: 20px;
z-index: 1000;
}
.popup.active {
display: block; /* Показываем при добавлении класса active */
}
```
### JavaScript
```javascript
document.getElementById("open-popup").onclick = function() {
document.getElementById("popup-window").classList.add("active");
};
document.getElementById("close-popup").onclick = function() {
document.getElementById("popup-window").classList.remove("active");
};
```
### Объяснение:
1. **HTML**: У вас есть кнопка, которая при нажатии будет открывать всплывающее окно, а также само всплывающее окно с кнопкой для его закрытия.
2. **CSS**: Селектор `.popup` изначально скрыт (`display: none`). При добавлении класса `active` элемент становится видимым (`display: block`).
3. **JavaScript**: Используются обработчики событий `onclick` для кнопки "Открыть" и кнопки "Закрыть". При нажатии на кнопку "Открыть" к элементу с ID `popup-window` добавляется класс `active`, что делает его видимым. При нажатии на кнопку "Закрыть" класс `active` удаляется, и всплывающее окно снова скрывается.
Таким образом, вы можете управлять видимостью всплывающего окна с помощью события `onclick`.