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

user4502652 发表于 Dev

用户名

我创建了一个具有两个绿色“加号”按钮的应用程序，当您按下右边的绿色“加号”按钮时，它将打开一个文本区域和两个按钮：一个绿色的“ 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-19

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

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

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

漂浮在另一个上的物品

漂浮在另一个上的物品

如何使一个div漂浮在另一个div上作为此图像

SVG：将形状漂浮在另一个形状上吗？

Divs以表格形式漂浮在另一个Div内

Angular 表单上的另一个按钮

原型对象jquery上的一个按钮与另一个按钮不同

原型对象jquery上的一个按钮与另一个按钮不同

如何使用另一个按钮启用/禁用一个按钮？

如何防止另一个按钮的触发

如何从另一个页面更改按钮的状态？

如何从另一个类更改按钮的属性？

如何使用按钮链接另一个页面？

如何从另一个类更改按钮的属性？

如何从另一个类获取按钮的文本

单击按钮如何调用另一个活动？

如何使单选按钮转到另一个 HTML？

在当前模态上按下按钮时，如何触发另一个模态？

如何在vuetify上放置另一个按钮

如何使用Kivy中的按钮在另一个屏幕上创建标签

如何在按钮上单击以显示其类的另一个布局（xml）？

如何添加另一个将用户引导到uiAlert上的Facebook的按钮？

如何在android另一个活动的操作栏上显示后退按钮

如何在按钮上设置密码以打开另一个活动？

隐藏两个按钮并在xml上显示另一个按钮

VB.NET在另一个按钮上绘制按钮

将另一个按钮的背景放在按钮背景Xamarin上

无法检查（单击）另一个单选按钮上的单选按钮：Angular Reactive Form

将按钮移到另一个按钮的位置