I want to create a basic slider with javascript. There are images and when I click left and right buttons the images must be changed.
My code doesn't work. Where is my problem? No image changes even if we press the buttons. All my pictures are in jpg format.
(function() {
const pictures = [
"i1",
"i2",
"i3",
"i4",
"i5",
"i6",
"i7"
];
let buttons = document.querySelectorAll(".btn");
let imgDiv = document.querySelector(".img-container");
let counter = 0;
buttons.forEach(function(button) {
button.addEventListener("click", function(e) {
if (button.classList.contains('btn-left')) {
counter--
if (counter < 0) {
counter = pictures.length - 1;
console.log('nnhnhh')
}
imgDiv.style.background = `url('/new_assets/images/${pictures[counter]}.jpg')`
}
if (button.classList.contains('btn-right')) {
counter++
if (counter > pictures.length - 1) {
counter = 0;
}
imgDiv.style.background = `url('/new_assets/images/${pictures[counter]}.jpg')`
}
})
})
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #F3ff58;
}
.img-container {
width: 60%;
min-height: 60vh;
background: url("/new_assets/images/i1.jpg") center/cover fixed no-repeat;
border: 0.5rem solid #F3ff70;
border-radius: 0.5rem;
-webkit-border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
-ms-border-radius: 0.5rem;
-o-border-radius: 0.5rem;
position: relative;
margin: 4rem auto;
box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.06);
}
.btn-right {
position: absolute;
top: 50%;
right: 0;
background-color: #3B117E;
color: #fff;
transform: translate(50%, -50%);
-webkit-transform: translate(50%, -50%);
-moz-transform: translate(50%, -50%);
-ms-transform: translate(50%, -50%);
-o-transform: translate(50%, -50%);
border: 0.2rem solid #3CBFF8;
font-size: 1.5rem;
padding: 15px;
cursor: pointer;
}
.btn-left {
position: absolute;
top: 50%;
left: 0;
background-color: #3B117E;
color: #fff;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
border: 0.2rem solid #3CBFF8;
font-size: 1.5rem;
padding: 15px;
cursor: pointer;
}
<div class="img-container">
<a class="btn btn-left"><i class="fas fa-caret-left"></i></a>
<a class="btn btn-right"><i class="fas fa-caret-right"></i></a>
</div>
<script src="/new_assets/js/slider.js"></script>
<script src="https://kit.fontawesome.com/865149e15b.js" crossorigin="anonymous"></script>
Your logic itself is working fine. The problem is because you wrapped the logic in an anonymous function which you never invoke. To fix the problem, unwrap your code.
In addition, the logic can be made more succinct. You can use a single event handler for all .btn elements by adding a data attribute to them which controls what value is added to the counter, along with Math.min() and Math.max() to ensure the counter never goes out of bounds.
const pictures = ["i1", "i2", "i3", "i4", "i5", "i6", "i7"];
let buttons = document.querySelectorAll(".btn");
let imgDiv = document.querySelector(".img-container");
let counter = 0;
buttons.forEach(button => {
button.addEventListener("click", function(e) {
counter += parseInt(e.currentTarget.dataset.dir, 10);
counter = Math.max(Math.min(counter, pictures.length - 1), 0);
imgDiv.style.background = `url('/new_assets/images/${pictures[counter]}.jpg')`;
console.log(counter); // just for debugging
})
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #F3ff58;
}
.img-container {
width: 60%;
min-height: 60vh;
background: url("/new_assets/images/i1.jpg") center/cover fixed no-repeat;
border: 0.5rem solid #F3ff70;
border-radius: 0.5rem;
-webkit-border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
-ms-border-radius: 0.5rem;
-o-border-radius: 0.5rem;
position: relative;
margin: 4rem auto;
box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.06);
}
.btn-right {
position: absolute;
top: 50%;
right: 0;
background-color: #3B117E;
color: #fff;
transform: translate(50%, -50%);
-webkit-transform: translate(50%, -50%);
-moz-transform: translate(50%, -50%);
-ms-transform: translate(50%, -50%);
-o-transform: translate(50%, -50%);
border: 0.2rem solid #3CBFF8;
font-size: 1.5rem;
padding: 15px;
cursor: pointer;
}
.btn-left {
position: absolute;
top: 50%;
left: 0;
background-color: #3B117E;
color: #fff;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
border: 0.2rem solid #3CBFF8;
font-size: 1.5rem;
padding: 15px;
cursor: pointer;
}
<div class="img-container">
<a class="btn btn-left" data-dir="-1"><i class="fas fa-caret-left"></i></a>
<a class="btn btn-right" data-dir="1"><i class="fas fa-caret-right"></i></a>
</div>
<script src="/new_assets/js/slider.js"></script>
<script src="https://kit.fontawesome.com/865149e15b.js" crossorigin="anonymous"></script>
Related
how can I put the cross on the top right side of my page? For now it appears on the left side.
.close {
vertical-align: middle;
border: none;
color: inherit;
border-radius: 50%;
background: transparent;
position: relative;
width: 32px;
height: 32px;
opacity: 0.6;
}
.close:focus,
.close:hover {
opacity: 1;
background: rgba(128, 128, 128, 0.5);
}
.close:active {
background: rgba(128, 128, 128, 0.9);
}
.close::before,
.close::after {
content: " ";
position: absolute;
top: 50%;
left: 50%;
height: 20px;
width: 4px;
background-color: currentColor;
}
.close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
My snipped code :https://jsfiddle.net/Lcqy3srg/3/
float
Use float: right on .close
MDN
/*Button to quit the form*/
.close {
vertical-align: middle;
border: none;
color: inherit;
border-radius: 50%;
background: transparent;
position: relative;
width: 20px;
height: 20px;
opacity: 0.6;
float: right;
}
.close:focus,
.close:hover {
opacity: 1;
background: rgba(128, 128, 128, 0.5);
}
.close:active {
background: rgba(128, 128, 128, 0.9);
}
/* tines of the X */
.close::before,
.close::after {
content: " ";
position: absolute;
top: 50%;
right: 0;
height: 20px;
width: 3px;
background-color: currentColor;
}
.close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
<div>
<button class="close" aria-label="Close"></button>
</div>
position
Using position: absolute and right: 0px will result in the same effect. It however requires more work, and might not work in many cases where you need to use a position other than absolute. (for example in this case, it gives a scroll bar because it was intended to use relative)
MDN
/*Button to quit the form*/
.close {
vertical-align: middle;
border: none;
color: inherit;
border-radius: 50%;
background: transparent;
position: absolute; /*Changed to absolute*/
width: 20px;
height: 20px;
opacity: 0.6;
right: 0px;
}
.close:focus,
.close:hover {
opacity: 1;
background: rgba(128, 128, 128, 0.5);
}
.close:active {
background: rgba(128, 128, 128, 0.9);
}
/* tines of the X */
.close::before,
.close::after {
content: " ";
position: absolute;
top: 50%;
right: 0;
height: 20px;
width: 3px;
background-color: currentColor;
}
.close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
<div>
<button class="close" aria-label="Close"></button>
</div>
you simply can add div "content" as parent of div "close"
.content {
position:absolute ;
top:0;
right:0;
}
Code screenshot:
I've made a form which, on submitting, triggers the function "validateForm()" from an external .js file. Here's the html:
<div class="loginContainer">
<div id="login "class="login">
<img src="picture.tiff" class="loginImage">
<div class="loginHeading">
Login
</div>
<form id="form" onsubmit="validateForm()">
<input type="text" class="loginTextbox" name="name" placeholder="Username"></input>
<input type="password" class="loginTextbox" name="password" placeholder="Password"></input>
<div id="loginButtonContainer">
<input type="reset" class="loginButton" value="Reset">
<input type="submit" class="loginButton recommended" value="Login">
</div>
</form>
</div>
<script src="validator.js">
</script>
On clicking submit, it triggers the function "validateForm()" function, which checks to see if the username is "username" and password is "password".(It's only an experiment I'm doing, so not much security needed.) And if they're not, it adds "disabled" and "invalid" classes to the form, and then removes them. (it functions like the macOS password screen on boot up.)
Only for some reason, it only executes part of the code:
function validateForm() {
var form = document.getElementById("login");
var name = document.forms["form"]["name"].value;
var password = document.forms["form"]["password"].value;
if (name == "username" && password == "password") {
alert("Password is correct.");
} else {
alert("Password is incorrect.");
// this part doesn't execute.
form.classList.add("disabled");
setTimeout(function(){
form.classList.add("invalid");
}, 2000);
setTimeout(function(){
form.classList.remove("invalid");
form.classList.remove("disabled");
}, 600);
}
}
The part of code from form.classList.add("disabled"); doesn't execute. Can someone help me out with this?
edit:
I tried <div id="login" class="login"> instead of <div id="login "class="login">, it doesn't work.
Edit 2:
Here is the CSS:
body {
background-image: url("background.jpg");
font-family: system-ui;
background-size: cover;
background-position: center;
}
.loginContainer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(10, 10, 10, 0.5);
z-index: 1;
}
.login {
height: 360px;
width: 300px;
background-color: #fbfbfb;
border: 2px;
border-radius: 16px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
-webkit-transform: translate(-50%, -50%);
}
.loginimage {
width: 100px;
height: 100px;
padding-top: 25px;
}
.loginHeading {
font-size: 30px;
font-weight: bold;
height: 50px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.loginTextbox {
height: 50px;
width: 270px;
margin: 4px;
background-color: #fff;
border: 2px;
border-radius: 16px;
font-size: 20px
padding-right: 1rem;
padding-left: 1rem;
}
.invalid {
animation: shake .5s linear;
}
.loginTextbox:focus, textarea:focus {
box-shadow: 0 0 5px #0084FF;
border: 1px solid #006AFF;
}
.disabled {
background-image: -webkit-linear-gradient(#cccccc, #bbbbbb);
color: gray;
}
.loginbuttonContainer{
height: 83px;
width: 300px;
}
.loginbutton {
height: 50px;
width: 130px;
margin: 4px;
background-color: #f5f5f5;
border: 2px;
border-radius: 16px;
font-size: 20px
}
.loginbutton:hover {
background-color: #f0f0f0;
}
.loginbutton:active {
background-image: -webkit-linear-gradient(#0084FF, #006AFF);
color: white;
}
.destructive {
color: red;
}
.recommended {
background-image: -webkit-linear-gradient(#0095FF, #007BFF);
color: white;
}
#keyframes shake {
8%, 41% {
-webkit-transform: translateX(-10px);
-webkit-transform: translate(-50%, -50%);
}
25%, 58% {
-webkit-transform: translateX(10px);
-webkit-transform: translate(-50%, -50%);
}
75% {
-webkit-transform: translateX(-5px);
-webkit-transform: translate(-50%, -50%);
}
92% {
-webkit-transform: translateX(5px);
-webkit-transform: translate(-50%, -50%);
}
0%, 100% {
-webkit-transform: translateX(0);
-webkit-transform: translate(-50%, -50%);
}
}
#supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.login {
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background-color: rgba(255, 255, 255, 0.5);
}
}
I believe this here is where your problem lies
<div id="login "class="login">
There is additional " " after id="login"
And you're calling it with
var form = document.getElementById("login");
Just change
<div id="login "class="login">
to
<div id="login"class="login">
Edit V2
Change the following
setTimeout(function(){
form.classList.remove("invalid");
form.classList.remove("disabled");
}, 9000); //Changes the delay of removing the effects
#keyframes shake {
8%, 41% {
transform: translateX(-10px);
transform: translate(-50%, -50%);
}
25%, 58% {
transform: translateX(10px);
transform: translate(-50%, -50%);
}
75% {
transform: translateX(-5px);
transform: translate(-50%, -50%);
}
92% {
transform: translateX(5px);
transform: translate(-50%, -50%);
}
0%, 100% {
transform: translateX(0);
transform: translate(-50%, -50%);
}
}
Change from 0.5s to 2 or 3 or so, because is too instant
.invalid {
animation: shake 5s linear;
}
Changed the color code here too
.disabled {
background-image: linear-gradient(red, blue);
color: gray;
}
I have a customized check box which is grabbed from Codepen.
When the page loads the checkbox is almost checked and no text is available in the box.
.
When the user unchecks the checkbox it shows the value of its label:
.
What I want to do is to show a custom message to be displayed in the checkbox like 'Click me to confirm the contact'. When the user unchecks the checkbox it works fine showing that contacted.
I have tried with jQuery and it is not working. Could anyone give me a working solution? I expect something like this:
Thanks.
.inputGroup {
background-color: #fff;
border-radius: 25px;
}
.inputGroup label {
padding: 12px 30px;
width: 100%;
display: block;
text-align: left;
color: #3C454C;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 200ms ease-in;
overflow: hidden;
border: 2px solid green;
border-radius: 25px;
height: 40px;
}
.inputGroup label:before {
width: 32px;
height: 32px;
content: '';
border: 2px solid #D1D7DC;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
background-repeat: no-repeat;
background-position: 2px 3px;
border-radius: 50%;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
transition: all 200ms ease-in;
background-color: green;
}
.inputGroup input:checked~label {
color: #fff;
height: 40px;
border-radius: 25px;
border: 2px solid #5562eb;
}
.inputGroup input:checked~label:before {
-webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
transform: translate(-50%, -50%) scale3d(56, 56, 1);
opacity: 1;
background-color: white;
}
.inputGroup input {
width: 32px;
height: 32px;
order: 1;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
visibility: hidden;
border-radius: 25px;
}
<div class="inputGroup">
<input id="radio1" name="radioContacted" value="contacted" type="checkbox" checked />
<label for="radio1" id="radio01">Contacted</label>
</div>
I don't really understand why you want your checkbox to be always checked ( as i see in your HTML ) but here's a solution to change the text on the label. Using :after pseudo-element.
If this is not what you are looking for. Please let me know in the comments.
.inputGroup {
background-color: #fff;
border-radius: 25px;
position:relative;
}
.inputGroup label {
padding: 12px 30px;
width: 100%;
display: block;
text-align: left;
color: #3C454C;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 200ms ease-in;
overflow: hidden;
border: 2px solid green;
border-radius: 25px;
height: 40px;
box-sizing:border-box;
}
.inputGroup label:before {
width: 32px;
height: 32px;
content: '';
border: 2px solid #D1D7DC;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
background-repeat: no-repeat;
background-position: 2px 3px;
border-radius: 50%;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
transition: all 200ms ease-in;
background-color: green;
}
.inputGroup label:after {
content:"Contacted";
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:2;
left: 15px;
}
.inputGroup input:checked~label:after {
content:"Click me to confirm";
}
.inputGroup input:checked~label {
height: 40px;
border-radius: 25px;
border: 2px solid #5562eb;
}
.inputGroup input:checked~label:before {
-webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
transform: translate(-50%, -50%) scale3d(56, 56, 1);
opacity: 1;
background-color: white;
}
.inputGroup input {
width: 32px;
height: 32px;
order: 1;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
visibility: hidden;
border-radius: 25px;
}
<div class="inputGroup">
<input id="radio1" name="radioContacted" value="contacted" type="checkbox" checked />
<label for="radio1" id="radio01"></label>
</div>
Here's a solution using JavaScript to swap out the label values. One of the issues I ran into with this was that you had a text color of white on the label which I've had to remove to display the label.
input = document.getElementById('radio1');
label = document.getElementById('radio01');
function handleClick() {
(input.checked ? label.innerText = "Click me to confirm the contact" : label.innerText = "Contacted");
}
input.addEventListener('click', handleClick);
.inputGroup {
background-color: #fff;
border-radius: 25px;
}
#para {
z-index: 999;
}
.inputGroup label {
padding: 12px 30px;
max-width: 100%;
display: block;
text-align: left;
color: #3C454C;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 200ms ease-in;
overflow: hidden;
border: 2px solid green;
border-radius: 25px;
height: 40px;
}
.inputGroup label:before {
width: 32px;
height: 32px;
content: '';
border: 2px solid #D1D7DC;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
background-repeat: no-repeat;
background-position: 2px 3px;
border-radius: 50%;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
transition: all 200ms ease-in;
background-color: green;
}
.inputGroup input:checked~label {
height: 40px;
border-radius: 25px;
border: 2px solid #5562eb;
}
.inputGroup input:checked~label:before {
-webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
transform: translate(-50%, -50%) scale3d(56, 56, 1);
opacity: 0;
background-color: white;
}
.inputGroup input {
width: 32px;
height: 32px;
order: 1;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
visibility: hidden;
border-radius: 25px;
}
<div class="inputGroup">
<input id="radio1" name="radioContacted" value="contacted" type="checkbox" checked />
<label for="radio1" id="radio01">Click me to confirm the contact</label>
</div>
In an HTML form, I have a simple button - very similar to the ones showcased here https://codepen.io/sebj54/pen/oxluI
.btn {
position: relative;
display: block;
margin: 30px auto;
padding: 0;
overflow: hidden;
border-width: 0;
outline: none;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
background-color: #2ecc71;
color: #ecf0f1;
transition: background-color .3s;
}
I want to use a CSS (or Javascript) based animation that, when the button is clicked, generates 2 other buttons in the same div that display the 2 options that offer logical follow-up to this one. How can I accomplish this? Any suggestions for fancy transitions to the same would also help.
Add an eventListener on click. After that, you can just create two new buttons and place them instead of the original button. A very simple example:
var btn = document.getElementById('clickBtn');
btn.addEventListener('click', function(el) {
var btn1 = document.createElement("button");
var btn2 = document.createElement("button");
var span1 = document.createElement("span");
var span2 = document.createElement("span");
span1.appendChild(document.createTextNode("btn1"));
span2.appendChild(document.createTextNode("btn2"));
btn1.appendChild(span1);
btn2.appendChild(span2);
btn1.className = "btn green";
btn2.className = "btn orange";
btn1.type = "button";
btn2.type = "button";
btn.parentNode.appendChild(btn1);
btn.parentNode.appendChild(btn2);
btn.parentNode.removeChild(btn);
}, false)
.btn {
position: relative;
display: block;
margin: 30px auto;
padding: 0;
overflow: hidden;
border-width: 0;
outline: none;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
background-color: #2ecc71;
color: #ecf0f1;
transition: background-color .3s;
}
.btn:hover, .btn:focus {
background-color: #27ae60;
}
.btn > * {
position: relative;
}
.btn span {
display: block;
padding: 12px 24px;
}
.btn:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0;
padding-top: 0;
border-radius: 100%;
background-color: rgba(236, 240, 241, .3);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.btn:active:before {
width: 120%;
padding-top: 120%;
transition: width .2s ease-out, padding-top .2s ease-out;
}
/* Styles, not important */
*, *:before, *:after {
box-sizing: border-box;
}
html {
position: relative;
height: 100%;
}
body {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #ecf0f1;
color: #34495e;
font-family: Trebuchet, Arial, sans-serif;
text-align: center;
}
h2 {
font-weight: normal;
}
.btn.orange {
background-color: #e67e22;
}
.btn.orange:hover, .btn.orange:focus {
background-color: #d35400;
}
.btn.red {
background-color: #e74c3c;
}
.btn.red:hover, .btn.red:focus {
background-color: #c0392b;
}
<div>
<button class="btn red" type="button" id="clickBtn"><span>Extra-long button to let you appreciate the effect.</span></button>
</div>
I have modal window with pure CSS. I use for this 2 divs.
Question: How can I refactor this to use ONE div instead?
Wanted usage:
<div class="modal">
some text
x
</div>
Current code:
JSFiddle: http://jsfiddle.net/uogoxj8d/
.modal:before {
content: "";
position: fixed;
background-color: rgba(0,0,0,0.8);
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.modal-content {
position: fixed;
background-color: #FFFFFF;
border: 1px #000000 solid;
padding: 10px;
width: 70%;
max-width: 400px;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.modal-content a {
position: absolute;
top: 0;
right: 10px;
}
<div class="modal">
<div class="modal-content">
some text
x
</div>
</div>
Oh, I get it. Simply use a giant box-shadow. Would that do?
.modal-content {
position: fixed;
background-color: #FFFFFF;
border: 1px #000000 solid;
padding: 10px;
width: 70%;
max-width: 400px;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-shadow:0 0 0 9999px rgba(0,0,0,0.75);
}
<div class="modal-content">
some text
close
</div>