ich eine harte Zeit habe versucht, diese modal nahe den Weg zu machen, ich will es

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>

***> Hallo, können Sie mir helfen, versuche ich meine modalen Umzug in das zu machen recht, wenn die engen

Quelle

2016-12-12 Marven Wilson Donque

Verwendung Prozentsatz hinzufügen

animieren

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>

Quelle

2016-12-12 22:36:06 oqx

geklickt werden Sie müssen die „linke“ Eigenschaft entfernen, bevor Sie die „richtige“ Eigenschaft

Quelle

2016-12-12 22:05:27 Mathspy

ich eine harte Zeit habe versucht, diese modal nahe den Weg zu machen, ich will es

Antwort

Verwandte Themen