#javascript #html #css #css-selectors #popup
Вопрос:
Я пытаюсь создать всплывающее окно с помощью html и css. Среди всплывающих окон, которые я хочу настроить с помощью переключателя, я смотрю видео, которое поможет мне, и я следил за ним, как это показано в видео. Проблема возникает, когда я хочу выполнить часть, связанную с псевдоклассом: проверил css, потому что он не работает для меня, то есть он не позволяет мне щелкнуть и выбрать то, что я хочу
Я был бы признателен, если бы кто-нибудь знал, почему это так
HTML:
<div class="overlay">
<div class="popup">
<a href="#" id="btn-cerrar-popup" class="btn-cerrar-popup"><img src="C:UsersUsuarioDownloadscrowdfunding-product-page-mainimagesicon-close-modal.svg" ></a>
<h1>Back this project</h1>
<br>
<p>Want to support us in bringing Mastercraft Bamboo Monitor Riser out in the world?</p>
<div class="modal-card">
<input type="radio" value="Pledge with no reward">
<label>Pledge with no reward</label>
<br><br>
<p>Choose to support us without a reward if you simply believe in our project. As a backer,
you will be signed up to receive product updates via email.</p>
</div>
</div>
И CSS
.overlay {
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vw;
}
.popup {
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
width: 44%;
height: auto;
text-align: left;
padding-bottom: 2%;
padding-left: 3%;
padding-right: 3%;
padding-top: 1%;
background-color: white;
border-radius: 10px;
margin-top: -32.5%;
}
.modal-card {
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
border-radius: 10px;
padding-bottom: 4%;
padding-left: 3%;
padding-right: 2%;
padding-top: 4%;
margin-top: 3%;
}
.modal-card p {
padding-left: 10%;
padding-right: 5%;
}
input[type="radio"] {
display: none;
}
label {
position: relative;
cursor: pointer;
font-weight: bold;
background: rgba(0, 0 ,0 ,0.1);
padding: 5px 15px 5px 80px;
display: inline-block;
}
label:hover {
background: rgba(0, 116 ,217 ,0.1);
}
label::before {
content: "";
width: 20px;
height: 20px;
display: inline-block;
border: 2px solid #222;
background: none;
border-radius: 50%;
position: absolute;
left: 20px;
top: 2px;
}
input[type="radio"]:checked label {
padding: 5px 15px;
background: #0074D9;
border-radius: 2px;
color: white;
}
Это код, который у меня есть, до того, как я попробовал его с помощью интернет-кода, и он тоже не работал для меня.
Ответ №1:
Поскольку отображение ввода отсутствует, его нельзя проверить. Я думаю, вы можете добавить » для » к ярлыку.
<input type="radio" value="Pledge with no reward" id="yourId">
<label for="yourId">Pledge with no reward</label>
Ответ №2:
С данным кодом есть пара проблем: Поскольку ввод отображается на дисплее: нет, он не доступен для клика; с помощью переключателя мы не предоставили пользователю никакого способа отменить этот выбор, если он решит, что не хочет давать безответное обещание.
Для первой проблемы мы можем расположить входные данные абсолютно (чтобы это не влияло на позиционирование чего — либо еще), но с видимостью: скрыто-поэтому на странице есть «пробел», и его можно щелкнуть. Если мы свяжем его с его меткой (используя атрибут » для » в метке и присвоив входному элементу идентификатор), система обнаружит нажатие на метку, и мы сможем использовать это для изменения внешнего вида нашего круга.
Для второй проблемы в этом фрагменте используется флажок, а не переключатель, чтобы пользователь мог изменить свое мнение. Конечно, его можно снова подключить к радио, если это действительно необходимо.
<head>
<style>
.overlay {
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vw;
}
.popup {
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
width: 44%;
height: auto;
text-align: left;
padding-bottom: 2%;
padding-left: 3%;
padding-right: 3%;
padding-top: 1%;
background-color: white;
border-radius: 10px;
margin-top: -32.5%;
}
.modal-card {
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
border-radius: 10px;
padding-bottom: 4%;
padding-left: 3%;
padding-right: 2%;
padding-top: 4%;
margin-top: 3%;
}
.modal-card p {
padding-left: 10%;
padding-right: 5%;
}
input#noreward {
position: absolute;
visibility: hidden;
}
label {
position: relative;
cursor: pointer;
font-weight: bold;
background: rgba(0, 0 ,0 ,0.1);
padding: 5px 15px;
display: inline-block;
}
label:hover {
background: rgba(0, 116 ,217 ,0.1);
}
label::before {
content: "";
width: 20px;
height: 20px;
display: inline-block;
border: 2px solid #222;
background: white;
border-radius: 50%;
position: relative;
top: 2px;
margin-right: 20px;
}
input[type="checkbox"]:checked label::before {
background: radial-gradient(circle, #0074D9 0%, #0074D9 50%, transparent 60%, transparent 100%);
}
</style>
</head>
<body>
<div class="overlay">
<div class="popup">
<a href="#" id="btn-cerrar-popup" class="btn-cerrar-popup"><img src="C:UsersUsuarioDownloadscrowdfunding-product-page-mainimagesicon-close-modal.svg" ></a>
<h1>Back this project</h1>
<br>
<p>Want to support us in bringing Mastercraft Bamboo Monitor Riser out in the world?</p>
<div class="modal-card">
<input id="noreward" type="checkbox" value="Pledge with no reward">
<label for="noreward">Pledge with no reward</label>
<br><br>
<p>Choose to support us without a reward if you simply believe in our project. As a backer,
you will be signed up to receive product updates via email.</p>
</div>
</div>
</body>