Develop Reference

How to connect two options and toggle switch buttons

I would like to connect two labels and toggle switches.
If you click the toggle switch, it is desired that the switch is activated when you click the respective labels. However, if you click on the same label, you do not want the switch to move.
I made a toggle switch along this link https://www.w3schools.com/howto. This button works very well. But I don't know what to do to achieve the effect I want.I tried putting two options in the label, but the layout is broken.
I can't use other frameworks such as jQuery. Pure JavaScript support is available.
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>

This would be simple to solve with JavaScript, but it's a more interesting question with pure CSS/HTML.
Explanation: pointer-events: none disables clicks from having any effect. pointer-events: all is used selectively on child elements to re-enable clicking on them, depending on the checked state of the input.
/* the interesting bit */
.label {
pointer-events: none;
display: flex;
align-items: center;
}
.switch,
.input:checked + .label .left,
.input:not(:checked) + .label .right {
pointer-events: all;
cursor: pointer;
}
/* most of the stuff below is the same as the W3Schools stuff,
but modified a bit to reflect changed HTML structure */
.input {
display: none;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .label .slider {
background-color: #2196f3;
}
input:focus + .label .slider {
box-shadow: 0 0 1px #2196f3;
}
input:checked + .label .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* styling to make it look like your screenshot */
.left, .right {
margin: 0 .5em;
font-weight: bold;
text-transform: uppercase;
font-family: sans-serif;
}
<input class="input" id="toggle" type="checkbox">
<label class="label" for="toggle">
<div class="left">
Option A
</div>
<div class="switch">
<span class="slider round"></span>
</div>
<div class="right">
Option B
</div>
</label>

This will help you perfectly using two radio button.
HTML :-
<div class="normal-container">
<div class="smile-rating-container">
<div class="smile-rating-toggle-container">
<form class="submit-rating">
<input id="meh" name="satisfaction" type="radio" />
<input id="fun" name="satisfaction" type="radio" />
<label for="meh" class="rating-label rating-label-meh">Bad</label>
<div class="smile-rating-toggle"></div>
<div class="toggle-rating-pill"></div>
<label for="fun" class="rating-label rating-label-fun">Fun</label>
</form>
</div>
</div>
</div>
CSS:-
.smile-rating-container {
position: relative;
height: 10%;
min-width: 220px;
max-width: 520px;
margin: auto;
font-family: 'Roboto', sans-serif;
top: 20%;
}
.submit-rating {
display: flex;
align-items: center;
justify-content: center;
}
.rating-label {
position: relative;
font-size: 1.6em;
text-align: center;
flex: 0.34;
z-index: 3;
font-weight: bold;
cursor: pointer;
color: grey;
transition: 500ms;
}
.rating-label:hover, .rating-label:active {
color: grey;
}
.rating-label-fun {
left: -58px;
text-align: right;
}
.rating-label-meh {
left: 58px;
text-align: left;
color: #222;
}
.smile-rating-container input {
display: none;
}
.toggle-rating-pill {
position: relative;
height: 65px;
width: 165px;
background: grey;
border-radius: 500px;
transition: all 500ms;
}
.smile-rating-toggle {
position: absolute;
width: 54px;
height: 54px;
background-color: white;
left: 182px;
border-radius: 500px;
transition: all 500ms;
z-index: 4;
}
/*
Toggle Changes
*/
#meh:checked~.rating-label-meh {
color: #2196f3;
}
#fun:checked~.rating-label-meh {
color: grey;
}
#fun:checked~.mouth {
border: 4px solid #2196f3;
border-bottom-color: rgba(1, 1, 1, 0);
border-right-color: rgba(1, 1, 1, 0);
border-left-color: rgba(1, 1, 1, 0);
top: 23px;
left: 291px;
transform: rotateX(180deg);
border-radius: 100%;
}
#fun:checked~.rating-label-fun {
color: #2196f3;
}
#fun:checked~.smile-rating-toggle {
left: 282px;
}
#fun:checked~.rating-eye-left {
left: 292px;
}
#fun:checked~.rating-eye-right {
left: 316px;
}
#fun:checked~.toggle-rating-pill {
background-color: #2196f3;
}
#fun:checked~.rating-eye {
background-color: #2196f3;
}

Css not working when label tag placed before input tag?

The switching of the order placement of the two tags (input and label) stops either the function to run or the css to load! I've tried messing around with it but to no avail. I want the boxes to appear around the yes or no options and other than that the css is working fine so its just this one section
<ul>${q.a.map(([a])=>`<label class="for-checkbox-budget"><input class="checkbox-budget" type="radio" name="${nam}" value="${a}"><span data-hover="${a}">${a}</span></label>`).join('<br>\n')}</div></ul>`; }).join('\n')+frm.innerHTML;
#import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');
:root {
--white: #ffffff;
--light: #f0eff3;
--black: #000000;
--dark-blue: #1f2029;
--dark-light: #353746;
--red: #da2c4d;
--yellow: #f8ab37;
--grey: #ecedf3;
}
/* #Primary
================================================== */
body{
width: 100%;
background: var(--dark-blue);
overflow-x: hidden;
font-family: 'Poppins', sans-serif;
font-size: 17px;
line-height: 30px;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
h1{
font-family: 'Poppins', sans-serif;
font-size: 45px;
line-height: 30px;
color: var(--white);
letter-spacing: 1px;
font-weight: 500;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
p{
font-family: 'Poppins', sans-serif;
font-size: 17px;
line-height: 30px;
color: var(--white);
letter-spacing: 1px;
font-weight: 500;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
::selection {
color: var(--white);
background-color: var(--black);
}
::-moz-selection {
color: var(--white);
background-color: var(--black);
}
mark{
color: var(--white);
background-color: var(--black);
}
.section {
position: relative;
width: 100%;
display: block;
text-align: center;
margin: 0 auto;
}
.over-hide {
overflow: hidden;
}
.z-bigger {
z-index: 100 !important;
}
.background-color{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--dark-blue);
z-index: 1;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.checkbox:checked ~ .background-color{
background-color: var(--white);
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked),
[type="radio"]:checked,
[type="radio"]:not(:checked){
position: absolute;
left: -9999px;
width: 0;
height: 0;
visibility: hidden;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
position: relative;
width: 70px;
display: inline-block;
padding: 0;
margin: 0 auto;
text-align: center;
margin: 17px 0;
margin-top: 100px;
height: 6px;
border-radius: 4px;
background-image: linear-gradient(298deg, var(--red), var(--yellow));
z-index: 100 !important;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before {
position: absolute;
font-family: 'unicons';
cursor: pointer;
top: -17px;
z-index: 2;
font-size: 20px;
line-height: 40px;
text-align: center;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.checkbox:not(:checked) + label:before {
content: '\eac1';
left: 0;
color: var(--grey);
background-color: var(--dark-light);
box-shadow: 0 4px 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(26,53,71,0.07);
}
.checkbox:checked + label:before {
content: '\eb8f';
left: 30px;
color: var(--yellow);
background-color: var(--dark-blue);
box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}
.checkbox:checked ~ .section .container .row .col-12 p{
color: var(--dark-blue);
}
.checkbox:checked ~ .section .container .row .col-12 h1{
color: var(--dark-blue);
}
.checkbox-budget:checked + label,
.checkbox-budget:not(:checked) + label{
position: relative;
display: inline-block;
padding: 0;
padding-top: 20px;
padding-bottom: 20px;
width: 260px;
font-size: 52px;
line-height: 52px;
font-weight: 700;
letter-spacing: 1px;
margin: 0 auto;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
text-align: center;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
text-transform: uppercase;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
-webkit-text-stroke: 1px var(--white);
text-stroke: 1px var(--white);
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
color: transparent;
}
.checkbox-budget:not(:checked) + label{
background-color: var(--dark-light);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-budget:checked + label{
background-color: transparent;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:not(:checked) + label:hover{
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:checked + label::before,
.checkbox-budget:not(:checked) + label::before{
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 4px;
background-image: linear-gradient(138deg, var(--red), var(--yellow));
z-index: -1;
}
.checkbox-budget:checked + label span,
.checkbox-budget:not(:checked) + label span{
position: relative;
display: block;
}
.checkbox-budget:checked + label span::before,
.checkbox-budget:not(:checked) + label span::before{
position: absolute;
content: attr(data-hover);
top: 0;
left: 0;
width: 100%;
overflow: hidden;
-webkit-text-stroke: transparent;
text-stroke: transparent;
-webkit-text-fill-color: var(--white);
text-fill-color: var(--white);
color: var(--white);
-webkit-transition: max-height 0.3s;
-moz-transition: max-height 0.3s;
transition: max-height 0.3s;
}
.checkbox-budget:not(:checked) + label span::before{
max-height: 0;
}
.checkbox-budget:checked + label span::before{
max-height: 100%;
}
.checkbox:checked ~ .section .container .row .col-xl-10 .checkbox-budget:not(:checked) + label{
background-color: var(--light);
-webkit-text-stroke: 1px var(--dark-blue);
text-stroke: 1px var(--dark-blue);
box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05);
}
.oval {
width: 200px;
height: 80px;
background: #39ff14;
border-radius: 40px;
font-size: 20px;
font-family: 'Poppins', sans-serif;
color: var(--white);
}
<body>
<body>
<div class="section over-hide z-bigger">
<input class="checkbox" type="checkbox" name="general" id="general">
<label class="for-checkbox" for="general"></label>
<div class="background-color"></div>
<div class="section over-hide z-bigger">
<div class="container pb-5">
<div class="row justify-content-center pb-5">
<div class="col-12 pt-1">
<h1 class="mb-4 pb-2">Lets Start</h1>
</div>
<form name="combitest">
<p> Score for test 1 (Stroke) = <span class="res"></span><br><br>
<p> Score for test 2 (Diabetes) = <span class="res"></span><br><br>
<p> Score for test 3 (some other test) = <span class="res"></span><br><br>
<input type="reset" class="oval" value="Clear Answers">
</form>
</body>
const questions=[ // questions, answers with their associated points:
{q:"History of Stroke", a:[["Yes",[10,10, 0]],["No" , [ 0, 0, 0]]]}
];
const frm =document.querySelector("form");
// create questions block first:
frm.innerHTML=questions.map(q=>{
let nam=q.q.toLowerCase().replace(/ /g,"").substr(0,12)
return `<div class="col-12 pt-1">
<p class="mb-4 pb-2">${q.q}</p
</div>
<div class="col-xl-10 pb-5">
<ul>${q.a.map(([a])=>`<label class="for-checkbox-budget"><input class="checkbox-budget" type="radio" name="${nam}" value="${a}"><span data-hover="${a}">${a}</span></label>`).join('<br>\n')}</div></ul>`;
}).join('\n')+frm.innerHTML;
let spans=[...document.querySelectorAll('span.res')];
document.querySelector("input[type=reset]").onclick=ev=>spans.forEach(sp=>sp.textContent="");
frm.onchange=ev=>{
let res=[0,0,0], uls=document.querySelectorAll('form ul');
questions.forEach((qo,i)=>{ var a;
if (a=uls[i].querySelector("input:checked")){ // only if an answer has been chosen
let pts=qo.a.find(([el])=>el==a.value)[1] // get array with points for all tests
res.forEach((r,i)=>res[i]+=pts[i]); // add points to res-array
}
});
res.forEach((r,i)=>spans[i].textContent=r)
};

The + symbol is the next-sibling combinator.
If you swap the order, then the label isn't the next sibling, it is the previous one.
There is no previous sibling combinator (as CSS generally never applies a rule based on something that appears later in the DOM tree (for reasons of performance and to avoid conflicts)).
You might be able to keep the elements in the same DOM order while changing the order they are rendered in by combining a Flexbox layout with the order property.

Changing Button Color on Click [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am having a little problem with my code.
I want when the user clicks on any button it changes its color to the hover color and text color to white.
And when the user click the next button the previous one will come back to its previous state. Is it possible?
#charset "utf-8";
/* CSS Document */
.button {
display: inline-flex;
height: 40px;
width: 90px;
border: 2px solid #1A6893;
margin-top:20px;
color: #1A6893;
text-transform: uppercase;
text-decoration: none;
font-size: .8em;
letter-spacing: 1.5px;
align-items: center;
justify-content: center;
overflow: hidden;
}
a {
color: #1A6893;
text-decoration: none;
letter-spacing: 1px;
}
#button-3 {
position: relative;
overflow: hidden;
cursor: pointer;
}
#button-3 a {
position: relative;
transition: all .45s ease-Out;
}
#circle {
width: 0%;
height: 0%;
opacity: 0;
line-height: 40px;
border-radius: 50%;
background: #1A6893;
position: absolute;
transition: all .5s ease-Out;
top: 20px;
left: 70px;
color:#FFF;
}
#button-3:hover #circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
#button-3:hover a {
color: #FFF;
}
.abc{
margin-top:20px;
}
.boxes {
margin: auto;
padding: 50px;
background: #484848;
}
/*Checkboxes styles*/
input[type="checkbox"] { display: none; }
input[type="checkbox"] + label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
font: 14px/20px 'Open Sans', Arial, sans-serif;
color: #1a6893;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input[type="checkbox"] + label:last-child { margin-bottom: 0; }
input[type="checkbox"] + label:before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #1a6893;
position: absolute;
left: 0;
top: 0;
opacity: .6;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked + label:before {
width: 10px;
top: -5px;
left: 5px;
border-radius: 0;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.button:active{
color:#039;
background-color:#396;
}
<div class="row" style="padding:0px;">
<div class="col-1"><div class="button" id="button-3" onClick="changeColor();"><div id="circle"></div>Day</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Week</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Month</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Day Sheet</div></div>
</div>

Just add some rules for the "active" state.
Also, I changed all your IDs to classes. You should only provided unique identifiers in the ID attribute.
Furthermore, I changed the button-3:hover .circle rule to button-3:not(.active):hover .circle. This hides the animation of the circle when hovering over "active" buttons.
.button.active {
background-color: #396;
}
.button.active a {
color: #FFF;
}
.button-3:not(.active):hover .circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
Then listen for the click, toggle the "active" class from all buttons:
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.classList.toggle('active', button === e.currentTarget);
}
Example
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.addEventListener('click', handleButtonClick);
});
function handleButtonClick(e) {
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.classList.toggle('active', button === e.currentTarget);
});
}
#charset "utf-8";
/* CSS Document */
.button {
display: inline-flex;
height: 40px;
width: 90px;
border: 2px solid #1A6893;
margin-top: 20px;
color: #1A6893;
text-transform: uppercase;
text-decoration: none;
font-size: .8em;
letter-spacing: 1.5px;
align-items: center;
justify-content: center;
overflow: hidden;
}
.button.active {
background-color: #396;
}
.button.active a {
color: #FFF;
}
a {
color: #1A6893;
text-decoration: none;
letter-spacing: 1px;
}
.button-3 {
position: relative;
overflow: hidden;
cursor: pointer;
}
.button-3 a {
position: relative;
transition: all .45s ease-Out;
}
.circle {
width: 0%;
height: 0%;
opacity: 0;
line-height: 40px;
border-radius: 50%;
background: #1A6893;
position: absolute;
transition: all .5s ease-Out;
top: 20px;
left: 70px;
color: #FFF;
}
.button-3:not(.active):hover .circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
.button-3:hover a {
color: #FFF;
}
.abc {
margin-top: 20px;
}
.boxes {
margin: auto;
padding: 50px;
background: #484848;
}
/*Checkboxes styles*/
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
font: 14px/20px 'Open Sans', Arial, sans-serif;
color: #1a6893;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input[type="checkbox"]+label:last-child {
margin-bottom: 0;
}
input[type="checkbox"]+label:before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #1a6893;
position: absolute;
left: 0;
top: 0;
opacity: .6;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked+label:before {
width: 10px;
top: -5px;
left: 5px;
border-radius: 0;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.button:active {
color: #039;
background-color: #396;
}
<div class="row" style="padding:0px;">
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Day</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Week</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Month</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Day Sheet</div>
</div>
</div>

Open link in background tab without losing focus

I made a modal popup that reveals coupon code on my website, and the button is linked to the offer page. I want the offer page to open in background tab without losing focus on my page. is there any way to do it? here is the working link for my modal popup on button reveal coupon code and buy, thank you.
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
alert("Text Copied");
}
.coup-button {
font-size: 1.25em;
padding: 15px;
background: #dc3545;
color:#fff;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.coup-button:hover {
border: #dc3545 solid;
color:#dc3545;
background: #fff;
}
.coup-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.coup-overlay:target {
visibility: visible;
opacity: 1;
}
.coup-popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.coup-popup h4 {
margin-top: 0;
color: #333;
}
.coup-popup .coup-close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.coup-popup .coup-close:hover {
color: #dc3545;
}
.coup-popup .coup-content {
max-height: 30%;
overflow: auto;
}
.coup-copybutton{width: auto; height: auto; background: #dc3545; color: white; border: none;cursor: pointer; border-radius: 8px; outline: none; padding:10px; box-sizing: border-box;}
#media screen and (max-width: 700px){
.coup-popup{
width: 70%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="coup-button" href="https://www.pmbypm.com/best-pmp-exam-simulator/" target="_blank" onclick="location.href='#popup1'">Reveal Coupon Code</a>
<div id="popup1" class="coup-overlay">
<div class="coup-popup">
<h4>Here is your Coupon Code</h4>
<a class="coup-close" href="#">×</a>
<div class="coup-content" style="text-align: center;">
<p id="p1"><strong>UDEMYPM30</strong></p>
<button class="coup-copybutton" onclick="copyToClipboard('#p1')">Copy Text</button>
</div>
</div>
</div>

Try window.open('link', 'name');
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
alert("Text Copied");
}
function openView() {
location.href='#popup1';
window.open('https://stackoverflow.com/questions/60432716/', 'name');
}
.coup-button {
font-size: 1.25em;
padding: 15px;
background: #dc3545;
color:#fff;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.coup-button:hover {
border: #dc3545 solid;
color:#dc3545;
background: #fff;
}
.coup-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.coup-overlay:target {
visibility: visible;
opacity: 1;
}
.coup-popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.coup-popup h4 {
margin-top: 0;
color: #333;
}
.coup-popup .coup-close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.coup-popup .coup-close:hover {
color: #dc3545;
}
.coup-popup .coup-content {
max-height: 30%;
overflow: auto;
}
.coup-copybutton{width: auto; height: auto; background: #dc3545; color: white; border: none;cursor: pointer; border-radius: 8px; outline: none; padding:10px; box-sizing: border-box;}
#media screen and (max-width: 700px){
.coup-popup{
width: 70%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="coup-button" href="https://www.pmbypm.com/best-pmp-exam-simulator/" target="_blank" onclick="openView()">Reveal Coupon Code</a>
<div id="popup1" class="coup-overlay">
<div class="coup-popup">
<h4>Here is your Coupon Code</h4>
<a class="coup-close" href="#">×</a>
<div class="coup-content" style="text-align: center;">
<p id="p1"><strong>UDEMYPM30</strong></p>
<button class="coup-copybutton" onclick="copyToClipboard('#p1')">Copy Text</button>
</div>
</div>
</div>

onclick for closing cookie bar

i'm developing an app that should show a cookie bar and if the user click on the "X" it should to close, i've thinked to do it with the onclick attribute but it is ignored.
This is my code:
console.log("Ready !");
var close = function () {
console.log("close");
}
.cookie-bar {
position: fixed;
width: 100%;
top: 0;
right: 0;
left: 0;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #800000;
color: white;
font-size: 14px;
font-family: "Lato", sans-serif;
font-weight: 100;
transition: .8s;
animation: slideIn .8s;
animation-delay: .8s;
.message {
white-space: nowrap;
text-shadow: 0 1px 0 darken(red, 10%);
#media (max-width: 767px){
display: none;
}
}
.mobile {
display: none;
#media (max-width: 767px){
display: inline-block;
}
}
}
#keyframes slideIn {
0% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
.close-cb {
border: none;
color: white;
background: darken(red, 20%);
position: absolute;
display: inline-block;
right: 10px;
top: 0;
cursor: pointer;
border-radius: 3px;
box-shadow: inset 0 0 3px 0 rgba(0,0,0,.2);
line-height: 30px;
height: 30px;
width: 30px;
font-size: 16px;
font-weight: bold;
&:hover {
background: darken(red, 10%);
}
}
.checkbox-cb {
display: none;
&:checked + .cookie-bar {
transform: translateY(-50px);
}
}
<input class="checkbox-cb" id="checkbox-cb" type="checkbox" onclick="close()"/>
<div class="cookie-bar" id="cookie">
<span class="message">Questo sito utilizza i cookies</span>
<label for="checkbox-cb" class="close-cb" >x</a>
</div>
Can i solve it?
Thank's