我创建了一个具有两个绿色“加号”按钮的应用程序，当您按下右边的绿色“加号”按钮时，它将打开一个文本区域和两个按钮：一个绿色的“ salvar”和一个红色的“ cancelar”按钮。问题是，当我在按钮（页面顶部）上方放置一些东西（如标题）时，红色和绿色按钮会移离该位置，而绿色的“加号”按钮却不会。我要使红色和绿色按钮跟随绿色的“加号”按钮位置并停留在它们上方。
我使代码整洁，并且比原始代码小，以便于理解。
提前致谢。
function leftGreenButton() {
alert('Left Plus Button');
location.hash = '#add';
}
function rightGreenButton() {
alert('Right Plus Button');
$('#overlay, #overlay-back').fadeIn(500);
$(".text-hidden").toggleClass("text");
$(".saving").toggleClass("myButton");
$(".canceling").toggleClass("myButton");
document.getElementById("cancel").onclick = function () {
$(".text-hidden").toggleClass("text");
$('#overlay, #overlay-back').fadeOut(500);
$(".saving").toggleClass("myButton");
$(".canceling").toggleClass("myButton");
document.getElementById("desc").value = "";
};
document.getElementById("save").onclick = function () {
if (document.getElementById("desc").value === null || document.getElementById("desc").value === "") {
alert("Preencha a Descrição!");
} else {
$(".text-hidden").toggleClass("text");
$('#overlay, #overlay-back').fadeOut(500);
$(".saving").toggleClass("myButton");
$(".canceling").toggleClass("myButton");
}
};
}#headerR {
width: 80px;
height: 80px;
position:absolute;
top:90%;
right:30px;
}
#headerL {
width: 80px;
height: 80px;
position:absolute;
top:90%;
left:40px;
}
#addconfigR {
width: 70px;
height: 70px;
background: green;
color: #FFFFFF;
font-size:40px;
font-weight:700;
}
#addconfigL {
width: 70px;
height: 70px;
background: green;
color: #FFFFFF;
font-size:40px;
font-weight:700;
}
html, body {
width: 99%;
height: 99%;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 110%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none;
}
#overlay {
position: absolute;
width: 100%;
height: 75%;
z-index: 10;
display: none;
}
.text-hidden {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .7s ease;
top: 50%;
left: 50%;
}
.saving {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
bottom: 10%;
right: 39px;
background: Green;
color: white;
}
.canceling {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: fixed;
bottom: 10%;
left: 39px;
background: Red;
color: white;
}
.text {
transform: scaleX(1);
width: 300px;
height: 150px;
position: absolute;
top: 5%;
left: 50%;
margin-top: -75px;
margin-left: -150px;
}
.myButton {
transform: scaleX(1);
width: 80px;
height: 80px;
font-size:15px;
}<!DOCTYPE html>
<!--Função: Criação e Gerenciamento de Tarefas Online/Offline-->
<!-- Autor: Calne Ricardo de Souza-->
<!-- Data: 16/01/2015-->
<html lang="en" class="blue">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Minhas Tarefas</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Carter+One">
<link rel="stylesheet" href="http://example.com/sistema/padrao/HTML5/Task/style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript">
</script>
<link rel="stylesheet" href="http://example.com/sistema/padrao/HTML5/Task/style.css">
<style>
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
}
.custom-combobox-input {
margin: 0;
padding: 5px 10px;
}
</style>
<script src="app.js"></script>
</head>
<body>
<p>
<div id="headerR" style="float:right">
<button id="addconfigR" onclick="rightGreenButton();">+</button>
</div>
</p>
<div id="overlay-back"></div>
<div id="overlay">
<span>
<textarea id="desc" type="textarea" class="text-hidden"></textarea>
<button id="save" class="saving" onclick="validation();">
<span>
<span>Salvar</span>
<button id="cancel" class="canceling" onclick="cancel();">Cancelar</button>
</span>
</button>
</span>
</div>
<div id="headerL" style="float:left">
<button id="addconfigL" onclick="leftGreenButton();">+</button>
</div>
</body>
</html>最佳答案
function leftGreenButton() {
alert('Left Plus Button');
location.hash = '#add';
}
function rightGreenButton() {
alert('Right Plus Button');
$('#overlay, #overlay-back').fadeIn(500);
$(".text-hidden").toggleClass("text");
$(".saving").toggleClass("myButton");
$(".canceling").toggleClass("myButton");
document.getElementById("cancel").onclick = function () {
$(".text-hidden").toggleClass("text");
$('#overlay, #overlay-back').fadeOut(500);
$(".saving").toggleClass("myButton");
$(".canceling").toggleClass("myButton");
document.getElementById("desc").value = "";
};
document.getElementById("save").onclick = function () {
if (document.getElementById("desc").value === null || document.getElementById("desc").value === "") {
alert("Preencha a Descrição!");
} else {
$(".text-hidden").toggleClass("text");
$('#overlay, #overlay-back').fadeOut(500);
$(".saving").toggleClass("myButton");
$(".canceling").toggleClass("myButton");
}
};
}#headerR {
width: 80px;
height: 80px;
position:absolute;
top:90%;
right:30px;
}
#headerL {
width: 80px;
height: 80px;
position:absolute;
top:90%;
left:40px;
}
#addconfigR {
width: 70px;
height: 70px;
background: green;
color: #FFFFFF;
font-size:40px;
font-weight:700;
}
#addconfigL {
width: 70px;
height: 70px;
background: green;
color: #FFFFFF;
font-size:40px;
font-weight:700;
}
html, body {
width: 99%;
height: 99%;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 110%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none;
}
#overlay {
position: absolute;
width: 100%;
height: 75%;
z-index: 10;
display: none;
}
.text-hidden {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .7s ease;
top: 50%;
left: 50%;
}
.saving {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
bottom: 10%;
right: 39px;
background: Green;
color: white;
}
.canceling {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: fixed;
bottom: 10%;
left: 39px;
background: Red;
color: white;
}
.text {
transform: scaleX(1);
width: 300px;
height: 150px;
position: absolute;
top: 5%;
left: 50%;
margin-top: -75px;
margin-left: -150px;
}
.myButton {
transform: scaleX(1);
width: 80px;
height: 80px;
font-size:15px;
}<!DOCTYPE html>
<!--Função: Criação e Gerenciamento de Tarefas Online/Offline-->
<!-- Autor: Calne Ricardo de Souza-->
<!-- Data: 16/01/2015-->
<html lang="en" class="blue">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Minhas Tarefas</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Carter+One">
<link rel="stylesheet" href="http://example.com/sistema/padrao/HTML5/Task/style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript">
</script>
<link rel="stylesheet" href="http://example.com/sistema/padrao/HTML5/Task/style.css">
<style>
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
}
.custom-combobox-input {
margin: 0;
padding: 5px 10px;
}
</style>
<script src="app.js"></script>
</head>
<body>
<p>
<div id="headerR" style="float:right">
<button id="addconfigR" onclick="rightGreenButton();">+</button>
</div>
</p>
<div id="overlay-back"></div>
<div id="overlay">
<span>
<textarea id="desc" type="textarea" class="text-hidden"></textarea>
<h1>hello your code is working now</h1>
<button id="save" class="saving" style="position:fixed" onclick="validation();">
<span>
<span>Salvar</span>
<button id="cancel" class="canceling" onclick="cancel();">Cancelar</button>
</span>
</button>
</span>
</div>
<div id="headerL" style="float:left">
<button id="addconfigL" onclick="leftGreenButton();">+</button>
</div>
</body>
</html>