Currently I am building a simon game clone and I thought I'd like to modernize a bit.
Anyway, I was able to find a blog on how to make toggle switch with only CSS3 (http://callmenick.com/post/css-toggle-switch-examples)
However, since I am trying to make this web responsive, I made the container (label) with width : 100%.
I am having hard time figuring out how to make the toggle switch itself move towards the end of the container at any width viewport.
body {
background: skyblue;
font-family: 'Righteous', cursive;
box-sizing: border-box; }
.container {
width: 100%;
display: flex;
flex-wrap: wrap; }
.game {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 70vh;
margin-top: 10px; }
.button {
position: relative;
display: block;
height: 50%;
width: 50%;
margin-bottom: 1px; }
#green {
background: #39d565;
border-top-left-radius: 25%;
box-shadow: 0 6px 0 #0d934b;
bottom: 6px;
transition: all 0.1s linear; }
#green:active {
bottom: 0px;
box-shadow: 0px 0px 0px #0d934b; }
#red {
background: #d23a51;
border-top-right-radius: 25%;
box-shadow: 0 6px 0 #711515;
bottom: 6px;
transition: all 0.1s linear; }
#red:active {
bottom: 0px;
box-shadow: 0px 0px 0px #711515; }
#blue {
background: #09f;
border-bottom-left-radius: 25%;
box-shadow: 0 6px 0 #06c;
bottom: 6px;
transition: all 0.1s linear; }
#blue:active {
bottom: 0px;
box-shadow: 0px 0px 0px #06c; }
#yellow {
background: #FD9A01;
border-bottom-right-radius: 25%;
box-shadow: 0 6px 0 #916828;
bottom: 6px;
transition: all 0.1s linear; }
#yellow:active {
bottom: 0px;
box-shadow: 0px 0px 0px #916828; }
.score {
width: 100%;
height: 10vh;
text-align: center;
color: #FFF;
text-shadow: 1px 3px 2px black; }
.control-panel {
text-align: center;
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
height: 15vh;
background: #aaaaaa;
border-radius: 10px; }
.control-panel #on-off-btn {
width: 33.3333%; }
.control-panel #level {
background: orange;
width: 33.3333%; }
.control-panel #start {
background: purple;
width: 33.3333%; }
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden; }
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none; }
input.cmn-toggle-round + label {
padding: 2px;
max-width: 90%;
height: 35px;
background-color: #dddddd;
border-radius: 60px;
margin-top: 9px;
margin-left: 5px; }
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: ""; }
input.cmn-toggle-round + label:before {
right: 1px;
background-color: white;
border-radius: 60px;
transition: background 0.4s; }
input.cmn-toggle-round + label:after {
width: 38px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: margin 0.4s; }
input.cmn-toggle-round:checked + label:before {
background-color: #8ce196; }
input.cmn-toggle-round:checked + label:after {
margin-left: 20px; }
#media screen and (min-width: 426px) {
.container {
width: 426px;
margin-left: auto;
margin-right: auto; } }
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" charset="utf-8"></script>
<title>Simon Game FCC</title>
</head>
<body>
<div class="container">
<div class="game">
<div id="green" class="button"></div>
<div id="red" class="button"></div>
<div id="blue" class="button"></div>
<div id="yellow" class="button"></div>
</div>
<div class="score">
<h2>Score: 0 </h2>
</div>
<div class="control-panel">
<div id="on-off-btn">
<input id="cmn-toggle-1"type="checkbox" class="cmn-toggle cmn-toggle-round">
<label for="cmn-toggle-1"></label>
<p>Off/On</p>
</div>
<div id="level"></div>
<div id="start"></div>
</div>
</div>
</body>
</html>
To achieve your expected result, use below option
Change margin-left:20px to 90% to work as expected
input.cmn-toggle-round:checked + label:after {
margin-left: 90%;
}
http://codepen.io/nagasai/pen/jAYojX
Related
I can not get a solution – after testing some hours. Maybe anybody can help me.
The mobile menu opens correct, but does not close when clicking the close-button or the dark background.
On all devices, Android, Windows, Mac, on every Browser it works very fine. Only on iOS (Safari), the close-function does not react.
Anybody has a solution for this problem?
Thank you very much!
#head-top-inner-right {
float: left;
padding-left: 12px;
}
#nav-container {
position: fixed;
height: 100vh;
width: 100%;
pointer-events: auto !important;
}
#nav-container .bg {
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 100% !important;
visibility: hidden;
opacity: 0;
transition: .3s;
background: #000;
}
#nav-container:focus-within .bg {
visibility: visible;
opacity: .6;
}
#nav-container * {
visibility: visible;
}
.button {
position: relative !important;
display: flex;
flex-direction: column;
justify-content: center;
-webkit-appearance: none;
border: 0;
background: #fff;
border: 1px solid #E6E6E6;
border-radius: 0;
height: 50px;
width: 30px;
padding-left: 10px;
padding-right: 10px;
margin-top: 5px;
cursor: pointer;
pointer-events: auto;
margin-left: 25px;
margin-right: 0px;
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(0,0,0,0);
float: right;
}
.icon-bar {
display: block;
width: 100%;
height: 1.5px;
background: #1C5292;
transition: .3s;
cursor: pointer;
}
.icon-bar + .icon-bar {
margin-top: 5px;
}
#nav-container:focus-within .button {
pointer-events: none;
cursor: pointer;
}
#nav-container:focus-within .icon-bar:nth-of-type(1) {
transform: translate3d(0,6.5px,0) rotate(45deg);
cursor: pointer;
}
#nav-container:focus-within .icon-bar:nth-of-type(2) {
opacity: 0;
cursor: pointer;
}
#nav-container:focus-within .icon-bar:nth-of-type(3) {
transform: translate3d(0,-6.5px,0) rotate(-45deg);
cursor: pointer;
}
#head{
display: none;
}
#head-mobile{
background-color: #fff;
border-bottom: 1px solid #f5f5f5;
max-width: 100%;
height: auto;
text-align: left;
margin: 0px auto;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
overflow: hidden;
display: block;
}
#nav-content {
margin-top: -10px;
margin-left: -10px;
padding: 20px;
width: 67%;
max-width: 300px;
position: absolute;
top: 0;
left: 0;
height: 100% !important;
background: #fff;
pointer-events: auto;
-webkit-tap-highlight-color: rgba(0,0,0,0);
transform: translateX(-100%);
transition: transform .3s;
will-change: transform;
contain: content;
overflow: visible;
}
#nav-content a:link {
font-weight: 500;
font-size: 16px;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 5px;
margin-bottom: 5px;
width: 100%;
display: block;
}
#nav-content-spacer{
height: 1px;
width: 100%;
background-color: #E6E6E6;
display: block;
}
.small {
display: flex;
align-self: center;
}
.small a {
font-size: 12px;
font-weight: 400;
color: #888;
}
.small a + a {
margin-left: 15px;
}
#nav-container:focus-within #nav-content {
transform: none;
}
<style>
</style>
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mobilemenu.css">
</head>
<body>
<div id="wrapper">
<div id="head-top">
<div id="head-top-inner">
<div id="head-top-inner-left"></div>
<div id="head-top-inner-right"></div>
</div>
</div>
<div id="head-mobile">
<div id="nav-container">
<div class="bg"></div>
<span style="margin-right: 17px !important; display: block;"><div class="button" tabindex="0">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div></span>
<div id="nav-content" tabindex="0">
<h3 class="menu-title">Navigation</h3>
1
<span id="nav-content-spacer"></span>
2
<span id="nav-content-spacer"></span>
3
<span id="nav-content-spacer"></span>
4
<span id="nav-content-spacer"></span>
5
</div>
</div>
<div id="head-inner-left">
Logo
</div>
</div>
<div id="content">
Content
</div>
</div>
</body>
</html>
I was learning how to make a recipe-app on youtube with Javascript, then I finished it, but there is a problem, the app I was learning how to make has a function that when you click on an image it shows the recipe info but the info screen was too big for my pc, like it overflows and I couldn't click on the button (which is an X) to close the image and the person I was watching to learn on how to make this app managed to put a scroll bar on the images while I did EVERYTHING he did, the scroll bar didn't show up for me. and when I tried to adjust the size of the image info it only affected the sides while the top and bottom were unaffected (the sides were too thin and that made the image and text compressed and that gave it a bad apparence).
Here is the HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Recipes App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="mobile-container">
<header>
<input type="text" id="search-term" />
<button id="search"><i class="fas fa-search"></i></button>
</header>
<div class="fav-container">
<h3>Favorite Meals</h3>
<ul class="fav-meals" id="fav-meals"></ul>
</div>
<div class="meals" id="meals"></div>
</div>
<div class="popup-container hidden" id="meal-popup">
<div class="popup">
<button id="close-popup" class="close-popup"><i class="fas fa-times"></i></button>
<div class="meal-info" id="meal-info"></div>
</div>
</div>
</body>
</html>
Here is the CSS/Style Code (the popup part is the image that overflows):
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #FFDEE9;
background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);
display: flex;
align-items: center;
justify-content: center;
font-family: "Poppins", sans-serif;
margin: 0;
min-height: 100vh;
}
img {
max-width: 100%;
}
.mobile-container {
background-color: #fff;
box-shadow: 0 0 10px 2px #3333331a;
border-radius: 3px;
overflow: hidden;
width: 400px;
}
header {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
header input {
background-color: #eee;
border: none;
border-radius: 3px;
font-family: inherit;
padding: 0.5rem 1rem;
}
header button {
background-color: transparent;
border: none;
color: #aaa;
font-size: 1.5rem;
margin-left: 10px;
}
.fav-container {
background-color: #cc444494;
padding: 0.25rem 1rem;
text-align: center;
}
.fav-meals {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
padding: 0;
}
.fav-meals li { /* O position: relative; coloca o botão perto da foto da receita */
cursor: pointer;
position: relative;
margin: 5px;
width: 75px;
}
.fav-meals li .clear { /* Esse é para o botão de deletar as receitas da lista de favoritos */
background-color: transparent;
border: none;
cursor: pointer;
opacity: 0;
position: absolute;
top: -0.5rem;
right: -0.5rem;
font-size: 1.2rem;
}
.fav-meals li:hover .clear { /* O :hover é para quando você passar o cursor do mouse em cima de algo */
opacity: 1;
}
.fav-meals li img {
border: 2px solid #ffffff;
border-radius: 50%;
box-shadow: 0 0 10px 2px #3333331a;
object-fit: cover;
height: 70px;
width: 70px;
}
.fav-meals li span {
display: inline-block;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 75px;
}
.meal {
border-radius: 3px;
box-shadow: 0 0 10px 2px #3333331a;
cursor: pointer;
margin: 1.5rem;
overflow: hidden;
}
.meal-header {
position: relative;
}
.meal-header .random {
position: absolute;
top: 1rem;
background-color: #fff;
padding: 0.25rem 1rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.meal-header img {
object-fit: cover;
height: 250px;
width: 100%;
}
.meal-body {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
}
.meal-body h4 {
margin: 0;
}
.meal-body .fav-btn {
border: none;
background-color: transparent;
color: #cecaca;
cursor: pointer;
font-size: 1.2rem;
}
.meal-body .fav-btn.active {
color: crimson;
}
.popup-container {
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.popup-container.hidden {
opacity: 0;
pointer-events: none;
}
.popup {
background-color: #fff;
border-radius: 5px;
padding: 0 2rem;
position: relative;
overflow: auto;
margin: 2rem;
max-width: 100vh;
max-width: 500px;
width: 100%;
}
.popup .close-popup {
background-color: transparent;
border: none;
cursor: pointer;
font-size: 1.5rem;
position: absolute;
top: 1rem;
right: 1rem;
}
.meal-info h1 {
text-align: center;
}
In .popup you have two max-width rules - I believe one of them is meant to be max-height, because height have to be specified along with overflow: auto.
Nonetheless, a useful suggestion - most tutorial videos have a link to source code. You can look there if something else is missed and not shown in the video.
Current Situation Image
Here is what I have got. But I want that rectangle facebook image behind the red region (currently it is just behind the text 'Please')
#mlnk{
text-decoration:none;
position:relative;
top:40%;
left:0%;
color: #b5c5d6;
}
.container-corner-img{ /* **THIS IS TO BE PUSHED BACK** */
height: 40%; width: 70%;
position: absolute;
top: 5px; left:-75px;
}
.container{
width:50%;
height:30%;
background: linear-gradient(#8B9DC1, #3b5998);
padding:100px;
border-radius:12px;
position: relative;
font-family: sans-serif;
}
h1{ /* **THIS NEEDS TO BE BROUGHT TO FRONT** */
margin-left: auto;
margin-right: auto;
padding: 8px;
border-radius: 4px;
box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);
transition: 0.4s ease;
background-color: red;
margin-top: 0;
}
img{
height: 80%;
width: 50%;
}
<div class="container">
<div class="container-corner-img">
<img src="fbminimal.png">
</div>
<h1>
<a id="mlnk" href = "#link"> Please login to your facebook account first</a>
</h1>
</div>
I have commented the css definitions in CAPS that needs to be focused according to me.
To bring the heading to the front, you have to set z-index to a larger value. To be able to use z-index on an element it needs to have a different position than static. So use relative. Moreover, do not use the center-tag since it is deprecated. The layout should be controlled by CSS only.
#mlnk {
text-decoration: none;
position: relative;
top: 40%;
left: 0%;
color: #b5c5d6;
}
h3 {
color: midnightblue;
padding: 4px;
box-shadow: 0 2px 4px 0 #38434e;
background: #3c64ad;
}
.container-corner-img {
/* **THIS IS TO BE PUSHED BACK** */
height: 40%;
width: 70%;
position: absolute;
top: 5px;
left: -75px;
/* opacity: 0.4; */
}
.container {
width: 50%;
height: 30%;
background: linear-gradient(#8B9DC1, #3b5998);
padding: 100px;
border-radius: 12px;
position: relative;
font-family: sans-serif;
/* z-index: 1; */
margin: 0 auto;
}
h1 {
/* **THIS NEEDS TO BE BROUGHT TO FRONT** */
margin-left: auto;
margin-right: auto;
padding: 8px;
border-radius: 4px;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
transition: 0.4s ease;
background-color: red;
/* rgba(0,0,80,0.2); */
margin-top: 0;
/* Add this */
position: relative;
z-index: 1000;
}
h1:hover {
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
transition: 0.4s ease;
}
img {
height: 80%;
width: 50%;
/* z-index: 0; */
}
.center {
text-align: center;
margin: 0 auto;
}
<div class="center">
<div class="container">
<div class="container-corner-img">
<img src="https://stocknews.com/wp-content/uploads/2017/07/facebook-fb-alternate.jpg">
</div>
<h1>
<a id="mlnk" href="#link"> Please login to your facebook account first</a>
</h1>
<h3>You need to Log In</h3>
</div>
</div>
I'm having a problem with span where it is changing the height of my div, breaking the styling I have implemented.
I have four images stacked 2 by 2 and I want text to roll up when I hover over them.
However, when I hover over them and the text appears it changes the size of the div since I have translated the text up by a certain amount.
I have made the divs blue so you can better see what is happening.
The divs obtain their height automatically. There are no set pixel heights in my website; everything is made using percentages so it would seem I can't just hide overflow.
Any help would be much appreciated on how I can fix this.
/* CSS Document */
body {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
background-image: url("images/background/space2.jpg");
background-size: cover;
margin: 0px;
}
#navigation {
width: 17%;
height: 100%;
position: fixed;
z-index: 3;
margin-left: 8%;
background-color: black;
opacity: 0.8;
filter: alpha(opacity=80);
float: left;
}
.navigationbody {
width: 100%;
height: 50px;
border-bottom: 2px rgba(255, 255, 255, 0.1) solid;
text-align: center;
}
.navigationbody a {
text-decoration: none;
color: white;
font-size: 30px;
position: relative;
top: 15%;
}
.navigationbody a:hover {
opacity: 0.8;
filter: alpha(opacity=80);
}
#navcontent {
height: auto;
margin-top: 50%;
position: static;
background-color: ;
align-items: center;
align-content: center;
}
#icon {
width: 100%;
margin-bottom: 10px;
background-color: ;
margin-left: 15%;
}
#bodycontainer {
bottom: 200px;
}
#icon img {
width: 70%;
height: auto;
}
#container {
width: 100%;
position: fixed;
top: 0px;
bottom: 0px;
}
#contentcontainer {
width: 75%;
margin-left: 25%;
height: 100%;
z-index: 2;
float: left;
overflow-y: auto;
}
#contentcontainer:hover {
background-color: rgba(0, 0, 0, 0.3);
}
#content {
padding: 0px;
}
.about {
width: auto;
margin-top: 10%;
margin-bottom: 30%;
margin-left: 20%;
margin-right: 20%;
text-align: center;
padding-bottom: 20px;
border-bottom: dotted 2px rgba(255, 255, 255, 1.00);
}
.about a {
color: white;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.20);
}
.about h1 {
color: white;
border-bottom: dotted 2px rgba(255, 255, 255, 1.00);
}
.about h2 {
color: white;
}
.abouthome {
width: auto;
margin-top: 10%;
margin-bottom: 30%;
margin-left: 20%;
margin-right: 20%;
text-align: center;
padding-bottom: 20px;
}
.abouthome h2 {
color: white;
border-bottom: dotted 2px rgba(255, 255, 255, 1.00);
}
.abouthome a {
color: white;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.20);
}
.software {
width: 100%;
margin-top: 60px;
align-content: center;
background-color: ;
}
.software img {
width: 100px;
height: auto;
}
.software img:hover {
opacity: .5;
}
.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
.gallery:hover {
border: 1px solid #777;
}
.gallery img {
width: 100%;
height: auto;
}
.desc {
padding: 15px;
text-align: center;
}
#contentgames {
right: 0px;
padding-left: 10%;
padding-top: 20%;
}
.games {
width: 45%;
height: auto;
overflow: hidden;
margin-right: 20px;
float: left;
transition: 0.5s;
position: relative;
background-color: aqua;
word-break: keep-all;
}
.games:hover {}
.games span {
color: white;
position: relative;
left: 10px;
bottom: 20px;
margin: 10px;
padding: 5px;
font-size: 0px;
opacity: 0;
transition: 0.5s;
align-content: center;
}
.games:hover span {
color: white;
position: relative;
bottom: 200px;
margin: 10px;
font-size: 18px;
opacity: 1;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Steven game design</title>
<link rel="stylesheet" type="text/css" href="style3.css" />
</head>
<div id="navigation">
<div id="navcontent">
<div id="icon">
<img src="http://placehold.it/150x150">
</div>
<div id="bodycontainer">
<div class="navigationbody"></div>
<div class="navigationbody">
Home
</div>
<div class="navigationbody">
About
</div>
<div class="navigationbody">
Blog
</div>
<div class="navigationbody">
Videos
</div>
<div class="navigationbody">
Pictures
</div>
<div class="navigationbody">
Contact
</div>
</div>
</div>
</div>
<body>
<div id="container">
<div id="contentcontainer">
<div id="contentgames">
<div class="games">
<img src="http://placehold.it/350x150" width="100%" height="auto" />
<span> This is a simple game I started making in flash. All of the artwork was created in flash. Unfortunately I never completed the game many things don't work such as the score, taking damage, boss and many more
</span>
</div>
<div class="games">
<img src="http://placehold.it/350x150" width="100%" height="auto" />
<span> This is a simple game I made in flash it took less than a week to create.</span>
</div>
<div class="games">
<img src="http://placehold.it/350x150" width="100%" height="auto" />
<span> This is another simple game in flash I made over the course of a few days.</span>
</div>
<div class="games">
<img src="http://placehold.it/350x150" width="100%" height="auto" />
<span>This is the game I am currently working on. It is my first 3d game. I am making it in the unreal engine 4.</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If the goal is for the image to be the deciding factor for the position and size of the div and the elements within it, this minimal, responsive example should provide some examples:
https://jsfiddle.net/d7aab2x7/2/
The critical code sets the text block to be positioned absolutely, allow the div to constrain it's size around the image:
div {
border: 1px solid red;
display: inline-block;
width: 40%;
position: relative;
overflow: hidden;
}
img {
display: block;
width: 100%;
}
span {
position: absolute;
bottom: -50px;
background: green;
height: 50px;
transition: bottom 200ms ease-out;
}
For this HTML:
<div>
<img src="http://placehold.it/300x300" />
<span>Some text that will appear on hover of the image</span>
</div>
Please note: I have re-created using the simplest example possible, and my fiddle uses only CSS for animation. Hopefully this provides you with an answer, while also providing general usefulness to the next person searching for something like this.
I have a pure HTML5/CSS modal window inside Razor View UserPanel in ASP.NET MVC application. I can activate this modal window by clicking a link: <p>Activate Modal</p>the problem is I want it to be displayed always when visiting /UserPanel page and don't have to click on this button.
The short html and then full css for the modal(it works - > the modal shows up only after clicking the button):
html:
<div class="container">
<p>Activate Modal</p>
</div>
<div id="modal">
<div class="modal-content">
<div class="header">
<h2>Notification</h2>
</div>
<div class="copy">
<p>There is new Announcment to read!</p>
</div>
<div class="cf footer">
Close
</div>
</div>
<div class="overlay"></div>
</div>
css:
<style>
#modal {
left: 50%;
margin: -250px 0 0 -40%;
opacity: 0;
position: absolute;
top: -50%;
visibility: hidden;
width: 80%;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#modal:target {
opacity: 1;
top: 50%;
visibility: visible;
}
#modal .header, #modal .footer {
border-bottom: 1px solid #e7e7e7;
border-radius: 5px 5px 0 0;
}
#modal .footer {
border: none;
border-top: 1px solid #e7e7e7;
border-radius: 0 0 5px 5px;
}
#modal h2 {
margin: 0;
}
#modal .btn {
float: right;
}
#modal .copy, #modal .header, #modal .footer {
padding: 15px;
}
.modal-content {
background: #f7f7f7;
position: relative;
z-index: 20;
border-radius: 5px;
}
#modal .copy {
background: #fff;
}
#modal .overlay {
background-color: #000;
background: rgba(0,0,0,.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
</style>
Question: How to always show modal when visiting this page?
Change your HTML to this (we simply target the close button):
<div id="modal">
<div class="modal-content">
<div class="header">
<h2>Notification</h2>
</div>
<div class="copy">
<p>There is new Announcment to read!</p>
</div>
<div class="cf footer">
Close
</div>
</div>
<div class="overlay"></div>
</div>
and now the CSS to this:
#modal {
left: 50%;
margin: -250px 0 0 -40%;
opacity: 1;
position: absolute;
top: 50%;
visibility: visible;
width: 80%;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#modal:target{
opacity: 0;
top: -50%;
visibility: hidden;
}
#modal .header, #modal .footer {
border-bottom: 1px solid #e7e7e7;
border-radius: 5px 5px 0 0;
}
#modal .footer {
border: none;
border-top: 1px solid #e7e7e7;
border-radius: 0 0 5px 5px;
}
#modal h2 {
margin: 0;
}
#modal .btn {
float: right;
}
#modal .copy, #modal .header, #modal .footer {
padding: 15px;
}
.modal-content {
background: #f7f7f7;
position: relative;
z-index: 20;
border-radius: 5px;
}
#modal .copy {
background: #fff;
}
#modal .overlay {
background-color: #000;
background: rgba(0,0,0,.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
we simply make the modal show by default, then hide it on click. Of course, if you want it always visible, just delete the close button. See fiddle here
i hope ths code will help
<div class="container">
<div id="modal">
<div class="modal-content">
<div class="header">
<h2>Notification</h2>
</div>
<div class="copy">
<p>There is new Announcment to read!</p>
</div>
<div class="cf footer">
Close
</div>
</div>
<div class="overlay"></div>
#modal {
left: 50%;
margin: -250px 0 0 -40%;
opacity: 0;
position: absolute;
top: -50%;
visibility: hidden;
width: 80%;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
opacity: 1;
top: 50%;
visibility: visible;
}
#modal .header, #modal .footer {
border-bottom: 1px solid #e7e7e7;
border-radius: 5px 5px 0 0;
}
#modal .footer {
border: none;
border-top: 1px solid #e7e7e7;
border-radius: 0 0 5px 5px;
}
#modal h2 {
margin: 0;
}
#modal .btn {
float: right;
}
#modal .copy, #modal .header, #modal .footer {
padding: 15px;
}
.modal-content {
background: #f7f7f7;
position: relative;
z-index: 20;
border-radius: 5px;
}
#modal .copy {
background: #fff;
}
#modal .overlay {
background-color: #000;
background: rgba(0,0,0,.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}