I want to tick mark on my button on the right corner. I set the input value to it gives me a buttoner text with tick mark I wanted to it should be placed on the right corner.
.buttoner{
background-color: #4CAF50;
border: none;
cursor: pointer;
height: 48px;
border-radius: 5px;
width: 10%;
}
<input type="button" class="buttoner" value="buttoner✓"/></input>
i want like this:
.my-btn {
position: relative;
display: inline-block;
}
.buttoner {
background-color: #66bb6a;
border: none;
cursor: pointer;
height: 48px;
border-radius: 3px;
width: 120px;
text-align: center;
color: white;
line-height: 48px;
font-size: 14px;
font-weight: bold;
}
.my-btn .fa-check {
position: absolute;
top: 5px;
right: 10px;
color: #fff;
font-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
<title>Button with tick mark</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="my-btn">
<input type="button" class="buttoner" value="Button"/>
<i class="fa fa-check"></i> </div>
</body>
</html>
try like this
HTML
<!DOCTYPE html>
<html>
<head>
<title>Button with tick mark</title>
<style type="text/css">
.buttoner{
background-color: #4CAF50;
border: none;
cursor: pointer;
padding:12px 30px;
display:inline-block;
border-radius: 5px;
color:#fff;
}
.tick{
display:inline-block;
position:relative;
}
.tick:after{
content: '';
position:absolute;
right:11px;
top:8px;
display: block;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
</style>
</head>
<body>
<span class="tick"> <input type="button" class="buttoner" value="button"/></input></span>
</body>
</html>
Check this i added..
<!DOCTYPE html>
<html>
<head>
<title>Button with tick mark</title>
<style type="text/css">
.button_box{
background-color: #4CAF50;
border: none;
cursor: pointer;
height: 48px;
border-radius: 5px;
width: 10%;
position: relative;
}
.buttoner {
background-color: transparent;
border: none;
display: block;
width: 100%;
height: 100%;
}
.button_box span {
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div class="button_box">
<input type="button" class="buttoner" value="buttoner"/>
<span>✓</span>
</div>
</body>
</html>
Related
I want to make a online card game with html/css/js and i want to make a place that shows all your cards but i want them to be inline and inline-block because i need to give it a custom width and height but when i do that it doesnt work
heres the code :
var players =
[
{
"id":1,
"name":"messi",
"price":100
},
{
"id":2,
"name":"ronaldo",
"price":100
}
];
for (var i = 0; i<players.length; i++){
document.getElementById('cards').innerHTML += `<li><div class="card" style="background-image: url('images/${players[i].name}.png');background-size: 80px 110px;"><h1>${players[i].name}</h1></div></li>`;
}
.coin{
display: inline-block;
margin-top: 5px;
margin-left: 10px;
text-align: center;
width: 25px;
height: 25px;
background-color: gold;
border-radius: 50%;
box-shadow: 0 0 10px goldenrod;
}
.xp{
display: inline-block;
margin-top: 5px;
margin-left: 10px;
text-align: center;
width: 25px;
height: 25px;
background-color: darkblue;
border-radius: 50%;
box-shadow: 0 0 10px blue;
}
.navbar{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.nav-item {
float: left;
}
.nav-item a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.card{
display: inline-block;
width: 80px;
text-align: center;
height: 110px;
border-radius: 5px;
margin: 5px;
color: #fff;
font-size: 12px;
box-shadow: 0 0 5px black;
}
.cards{
list-style-type: none;
display: inline;
background-color: rgb(56, 56, 56);
padding: 5px;
margin: 20px;
border-radius: 5px;
}
* {
font-family: "Helvetica Neue",Helvetica,Arial;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body style="background-color: rgb(53, 53, 53);">
<ul class="navbar">
<li class="nav-item"><div class="coin" >0</div></li>
<li class="nav-item"><div class="xp">0</div></li>
<li class="nav-item" style="float:right"><a>EFOOTBALL</a></li>
</ul>
<ul class="cards" id="cards">
</ul>
</body>
</html>
if you run the snippet its not horizontal
please help me i need help fast
Instead of making it inline u should make it display: flex
edit: to make cards go to next line use flex-wrap: wrap
var players =
[
{
"id":1,
"name":"messi",
"price":100
},
{
"id":2,
"name":"ronaldo",
"price":100
}
];
for (var i = 0; i<players.length; i++){
document.getElementById('cards').innerHTML += `<li><div class="card" style="background-image: url('images/${players[i].name}.png');background-size: 80px 110px;"><h1>${players[i].name}</h1></div></li>`;
}
.coin{
display: inline-block;
margin-top: 5px;
margin-left: 10px;
text-align: center;
width: 25px;
height: 25px;
background-color: gold;
border-radius: 50%;
box-shadow: 0 0 10px goldenrod;
}
.xp{
display: inline-block;
margin-top: 5px;
margin-left: 10px;
text-align: center;
width: 25px;
height: 25px;
background-color: darkblue;
border-radius: 50%;
box-shadow: 0 0 10px blue;
}
.navbar{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.nav-item {
float: left;
}
.nav-item a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.card{
display: block;
width: 80px;
text-align: center;
height: 110px;
border-radius: 5px;
margin: 5px;
color: #fff;
font-size: 12px;
box-shadow: 0 0 5px black;
}
.cards{
list-style-type: none;
display: flex;
flex-wrap: wrap;
background-color: rgb(56, 56, 56);
padding: 5px;
margin: 20px;
border-radius: 5px;
}
* {
font-family: "Helvetica Neue",Helvetica,Arial;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body style="background-color: rgb(53, 53, 53);">
<ul class="navbar">
<li class="nav-item"><div class="coin" >0</div></li>
<li class="nav-item"><div class="xp">0</div></li>
<li class="nav-item" style="float:right"><a>EFOOTBALL</a></li>
</ul>
<ul class="cards" id="cards">
</ul>
</body>
</html>
im trying to create a disney plus clone and im just starting out. In the navbar the links should be white and without the underline i have the no text decoration but it still shows up i dont understand.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
background: #0c111b;
position: relative;
font-family: roboto, sans-serif;
}
.navbar{
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
padding: 0 4%;
background: #0c111b;
z-index: 9;
display: flex;
align-items: center;
}
.brand-logo{
height: 70px;
}
.nav-links{
margin-top: 10px;
display: flex;
list-style: none;
text-decoration: none;
}
.nav-items{
text-decoration: none;
margin-left: 20px;
text-transform: capitalize;
color: #fff;
opacity: 0,9;
}
.right-container{
display: block;
margin-left: auto;
}
.search-box{
border: none;
border-bottom: 1px solid #aaa;
background: transparent;
outline: none;
height: 30px;
color: #fff;
width: 250px;
text-transform: capitalize;
font-size: 16px;
font-weight: 500;
transition: .5s;
}
.search-box:focus{
width: 400px;
border-color: #1f80e0;
}
.sub-btn{
background: #1f80e0;
height: 30px;
padding: 0 20px;
color: #fff;
border-radius: 5px;
border: none;
outline: none;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
margin: 0 10px;
}
.login-link{
color: #fff;
opacity: 0.9;
text-transform: uppercase;
font-size: 15px;
font-weight: 700;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<img src="images/logo.png" class="brand-logo" alt="">
<ul class="nav-links">
<li class="nav-items">TV</li>
<li class="nav-items">movies</li>
<li class="nav-items">sports</li>
<li class="nav-items">premium</li>
</ul>
<div class="right-container">
<input type="text" class="search-box" placeholder="search">
<button class="sub-btn">Subscribe</button>
login
</div>
</nav>
</body>
</html>
Default browser styles for the <a> element include values for properties:
color
text-decoration
and these default values will always apply unless you explicitly override them:
.nav-items {
margin-left: 20px;
text-transform: capitalize;
opacity: 0.9;
}
.nav-items a {
text-decoration: none;
color: #fff;
}
Browsers are applying embedded CSS.
by default, links are blue (purple then visited) and underlined, this is why you have these styles.
You can check the option to see the browser styles to verify this.
In every project you will always have to override default CSS styles, unless you use CSS frameworks, such as bootstrap, etc
Use text-decoration:none;for your nav-items a element in your css.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
background: #0c111b;
position: relative;
font-family: roboto, sans-serif;
}
.navbar{
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
padding: 0 4%;
background: #0c111b;
z-index: 9;
display: flex;
align-items: center;
}
.brand-logo{
height: 70px;
}
.nav-links{
margin-top: 10px;
display: flex;
list-style: none;
text-decoration: none;
}
.nav-items{
text-decoration: none;
margin-left: 20px;
text-transform: capitalize;
color: #fff;
opacity: 0,9;
}
.right-container{
display: block;
margin-left: auto;
}
.search-box{
border: none;
border-bottom: 1px solid #aaa;
background: transparent;
outline: none;
height: 30px;
color: #fff;
width: 250px;
text-transform: capitalize;
font-size: 16px;
font-weight: 500;
transition: .5s;
}
.search-box:focus{
width: 400px;
border-color: #1f80e0;
}
.sub-btn{
background: #1f80e0;
height: 30px;
padding: 0 20px;
color: #fff;
border-radius: 5px;
border: none;
outline: none;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
margin: 0 10px;
}
.login-link{
color: #fff;
opacity: 0.9;
text-transform: uppercase;
font-size: 15px;
font-weight: 700;
text-decoration: none;
}
.nav-items a {
text-decoration: none;
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<img src="images/logo.png" class="brand-logo" alt="">
<ul class="nav-links">
<li class="nav-items">TV</li>
<li class="nav-items">movies</li>
<li class="nav-items">sports</li>
<li class="nav-items">premium</li>
</ul>
<div class="right-container">
<input type="text" class="search-box" placeholder="search">
<button class="sub-btn">Subscribe</button>
login
</div>
</nav>
</body>
</html>
You have targeted wrong css just add anchor tag to .nav-items class.Bydefault it has blue color and text-decoration-underline property so remove the default behavior by adding your css.
.nav-items a {
text-decoration: none;
color: #fff;
}
I have created a basic content editable section using the tutorial from this website. HTML 5 Contenteditable
I have made a save button within the .toolbar at the top. When I go to change the text and press the .saveContent button, it doesn't save the content to localStorage so once refreshed, it disappears and goes back to the default text.
I have made the page as a .php page due to a login system I have made, would this be a factor at all in why it isn't working.
Code Here:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.newContent = editedContent;
});
if(localStorage.getItem('newContent')) {
theContent.html(localStorage.getItem('newContent'));
}
/* ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019. */
html > body {
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', sans-serif;
}
#wrapper {
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #1B315E;
}
.backdrop {
background-image: url(Assets/Images/backdrop.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.loginBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 420px;
background: rgba(0,0,0,0.6);
color: #FFF;
padding: 40px 30px;
box-sizing: border-box;
}
.loginBox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginBox input {
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"], input[type="password"] {
border: none;
outline: none;
border-bottom: 1px solid #FFF;
background: transparent;
height: 40px;
font-size: 14px;
color: #FFF;
}
.loginBox input[type="submit"] {
border: none;
outline: none;
height: 40px;
font-size: 16px;
color: #FFF;
background: #777;
font-weight: bold;
}
.loginBox input[type="submit"]:hover {
cursor: pointer;
color: #FFF;
background: #888;
}
.institution, .message {
font-size: 12px;
text-align: justify;
}
* {
box-sizing: border-box;
}
.navigation {
background: #333;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
}
.navLinks {
margin-top: 8px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.navLinks:hover {
background: #A5A5A5;
}
.menuDropDown {
float: left;
overflow: hidden;
}
.menuDropDown > .menuButton {
border: none;
outline: none;
color: #FFF;
background: inherit;
font: inherit;
margin: 0;
font-size: 16px;
padding: 12px 6px;
}
.menuButton:hover, .navigation > .menuDropDown:hover > .menuButton {
background: #999;
color: #1B315E;
outline: none;
border: none;
}
.menuContent {
display: none;
width: 100%;
background: none;
position: absolute;
z-index: 1;
left: 0;
overflow: auto;
max-height: 85vh;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.menuDropDown:hover > .menuContent {
display: block;
}
.menuColumn {
float: left;
width: 25%;
padding: 8px;
overflow-y: auto;
background: #999;
height: 235px;
}
.menuColumn > a {
float: none;
color: #1B315E;
padding: 10px;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
}
.menuRow:after {
content: "";
display: table;
clear: both;
}
.menuColumn > a:hover {
background: #A5A5A5;
}
.menuColumn > a.current {
background: #B6B6B6;
}
.menuHeader {
color: #1B315E;
margin-top: 0px;
margin-bottom: 8px;
}
.workspaceMain {
float: left;
width: 72.5%;
height: calc(100vh - 43px);
position: relative;
overflow: auto;
padding-right: 2px;
background: #FFF;
}
.toolbar {
background: #777;
border-bottom: 1px solid #666;
}
.toolbar > .saveContent {
color: #1B315E;
border: none;
outline: none;
background: #B6B6B6;
padding: 6px 6px;
font-size: 12px;
font: inherit;
}
.saveContent, .saveContent:hover, .toolLinks:hover {
background: #A5A5A5;
}
.toolLinks {
margin-top: 2px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.mainHeader {
text-align: center;
color: #1B315E;
}
table {
width: 100%;
font-size: 12px;
}
.tableName {
color: #1B315E;
font-size: 14px;
font-weight: bold;
}
<!DOCTYPE HTML>
<!--
~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
-->
<html lang="en-AU">
<head>
<title>Welcome — Summit — School Name</title>
<link rel="stylesheet" type="text/css" href="../style.css"> <!-- Internal Stylesheet -->
<script src="https://kit.fontawesome.com/d3afa470fb.js"></script> <!-- Vector Icons -->
<link rel="shortcut icon" href="../Assets/Images/favicon.png"> <!-- Favicon -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<?php
session_start();
if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] == false ) {
header("Location: index.php");
}
?>
<div id="wrapper">
<div class="navigation">
<button class="navLinks" title="Logout"><i class="fas fa-sign-out-alt"></i></button>
<button class="navLinks" title="Help"><i class="fas fa-question-circle"></i></button>
<button class="navLinks" title="Quick Links"><i class="fas fa-bookmark"></i></button>
<div class="menuDropDown">
<button class="menuButton" title="Site Navigation"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn"> <!-- Home Workspace -->
<h5 class="menuHeader">Home Workspace</h5>
<i class="fas fa-door-open"></i> Welcome
</div>
<div class="menuColumn"> <!-- Learning Workspace -->
</div>
<div class="menuColumn"> <!-- Student Management Workspace -->
</div>
<div class="menuColumn"> <!-- Administration Workspace -->
</div>
</div>
</div>
</div>
</div>
<div class="workspaceMain">
<div class="toolbar">
<button class="saveContent" title="Save Changes"><i class="fas fa-save"></i> Save</button>
<button class="toolLinks" title="Collapse Panel"><i class="fas fa-arrow-right"></i></button>
<button class="toolLinks" title="Change Background Colour"><i class="fas fa-fill-drip"></i></button>
</div>
<h3 class="mainHeader" id="editable" contenteditable="true">SCHOOL NAME</h3>
<table class="tableSet" id="editable" contenteditable="true">
<caption class="tableName">Weekly Outline</caption>
</table>
</div>
<div class="workspaceSide"></div>
</div>
</body>
</html>
Any help would be greatly appreciated.
Thanks, Tom
You need to use localStorage.setItem('key', value) to store the value in local storage
Your will then look like:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.setItem('newContent',editedContent)
});
You are using the id "editable" twice, could you change that and retry?
<span (focusout)="JumpTo()" contenteditable="true">Click to Change text</span>
JumpTo(){
var contenteditable = document.querySelector('[contenteditable]');
localStorage.setItem('newContent',contenteditable.textContent);
}
If you want to change it instantly use ngOnChanges()
I'am actually new with CSS, and have no idea to create a input like stackoverflow search form, I think it can be done with jquery trigger by button and change width value of that form?? Any suggestion or solutions?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.form-control{
width:100px;
}
.form-control:focus{
width:400px;
outline:none;
transition: all 600ms cubic-bezier(.165, .84, .44, 1);
}
</style>
</head>
<body>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</body>
</html>
some idea for you, this codepen link:
http://codepen.io/hdl881127/pen/EmyRaG
or use the following, check in full page.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
list-style: none;
font-family: helvetica, arial, sans-serif;
font-size: 14px
}
div#bar {
height: 40px;
background: #ccc;
box-shadow: inset 0 40px 40px -20px #eee;
padding-right: 200px;
}
div#bar > div {
position: relative;
padding-top: 5px
}
div#bar input, div#bar ul {
float: right;
}
div#bar input {
height: 30px;
width: 275px;
border-radius: 5px;
border: none;
padding: 5px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #fff;
background: #eee;
color: #333;
transition: all .7s
}
div#bar input:focus {
width: 625px;
background: white;
position: relative;
z-index: 20
}
div#bar input:focus + ul {
position: absolute;
right: 300px;
opacity: 0
}
div#bar ul {
width: 400px;
height: 30px;
position: absolute;
right: 300px;
opacity: 1;
transition: opacity .35s
}
div#bar ul li {
float: right;
line-height: 30px;
margin-left: 20px;
}
<div id="bar">
<div>
<input type="text" placeholder="search" />
<ul>
<li>Questions</li>
<li>Jobs</li>
<li>Documentation</li>
<li>Tags</li>
<li>Users</li>
</ul>
</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
function modal(){
TweenMax.to(".modal", 1, {left:1, ease:Power4.easeOut});
}
function hide(){
TweenMax.to(".modal", 1, {right:2000, ease:Power4.easeOut});
}
html, body{
margin: 0;
padding: 0;
width: inherit;
height: 100%
}
.container{
width: 100%;
height: 100%;
background-color: dimgrey;
z-index: -1;
}
.modal{
width: 95%;
height: 100%;
position: absolute;
background-color: green;
z-index: 2;
right: 100%;
}
#modalPop{
font-family: monospace;
}
.btn{
width: 10%;
height: 10%;
position: absolute;
border: 1px solid red;
margin-left: 20%;
margin-top: 20px;
z-index: 1;
}
.close {
color: #aaaaaa;
float: right;
font-size: 15px;
font-weight: bold;
margin-right: 20px;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="main.js" ></script>
<title>Modal</title>
</head>
<body>
<div class="container">
<div id="modalPop" class="modal">
<h1>THIS IS A MODAL</h1>
<span class="close" onclick="hide()">close</span>
</div>
<div class="btn">
<button onClick="modal()">CLICK ME</button>
</div>
</div>
</body>
</html>
***> Hi, can you help me, I am trying to make my modal move to the right when the close is clicked
use percentage to animate
function modal(){
TweenMax.to(".modal", 1, { ease: Power4.easeOut, left:'0'});
}
function hide(){
TweenMax.to(".modal", 1, {ease: Power4.easeOut,left:'-100%'});
}
html, body{
margin: 0;
padding: 0;
width: inherit;
height: 100%
}
.container{
width: 100%;
height: 100%;
background-color: dimgrey;
z-index: -1;
}
.modal{
width: 95%;
height: 100%;
position: absolute;
background-color: green;
z-index: 2;
right: 100%;
}
#modalPop{
font-family: monospace;
}
.btn{
width: 10%;
height: 10%;
position: absolute;
border: 1px solid red;
margin-left: 20%;
margin-top: 20px;
z-index: 1;
}
.close {
color: #aaaaaa;
float: right;
font-size: 15px;
font-weight: bold;
margin-right: 20px;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="main.js" ></script>
<title>Modal</title>
</head>
<body>
<div class="container">
<div id="modalPop" class="modal">
<h1>THIS IS A MODAL</h1>
<span class="close" onclick="hide()">close</span>
</div>
<div class="btn">
<button onClick="modal()">CLICK ME</button>
</div>
</div>
</body>
</html>
You need to remove the "left" property before you add the "right" property