如何使按钮始终浮动在另一个按钮上

时间：2015-02-02 11:48:30

标签： javascript html css html5

我创建了一个有两个绿色＆＃34; plus＆＃34;按钮，当你按下右边的绿色＆＃34;加＆＃34;按钮它打开一个文本区域和两个按钮：绿色＆＃34; salvar＆＃34;和红色＆＃34;取消＆＃34;按钮。问题是当我在按钮上方放置一些东西（页面顶部）时，如同标题一样，红色和绿色按钮远离位置，但绿色＆＃34;加上＆＃34;按钮不是。我想让红色和绿色按钮跟随绿色＆＃34;加＆＃34;按钮位置并留在它们上面。

为了方便理解，我使代码整洁，小于原始代码。

提前致谢。

＆＃13;
＆＃13; 
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");
        
    }

};
  
}
＆＃13; 
#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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

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>

相关问题
最新问题