一个按钮转变成一个简单的电子邮件形式

我有一个完成的按钮，它是基本的活动和悬停CSS元素。我想这样做，当我点击“加入循环”按钮时，它会变成一个简单的电子邮件形式，如这里的https://gab.ai/一个按钮转变成一个简单的电子邮件形式

对不起，我的跛脚解释。这里是我的代码https://jsfiddle.net/hkr95odp/1/

.up { 
 
    opacity: 0; 
 
    background-color:#FFF; 
 
    -moz-border-radius:10px; 
 
    -webkit-border-radius:10px; 
 
    border-radius:5px; 
 
    border:2px solid #ff0000; 
 
    display:inline-block; 
 
    cursor:pointer; 
 
    color:#ff0000; 
 
    font-family:Quicksand; 
 
    font-size:20px; 
 
    padding:10px 10px; 
 
    text-decoration:none; 
 
    margin-right: 30px; 
 
    margin-top: 20px; 
 
    transition: all 0.5s; 
 
    box-shadow: 0px 0px 130px -18px #ff0000; 
 

 
} 
 
.up:hover { 
 

 
    background-color: #ff0000; 
 
    color: #fff; 
 

 
} 
 
.up:active { 
 

 
}

来源

2016-11-19 emory grove

so ...代码在哪里？ – Jhecht

对不起，我正在编辑评论。这是我第一次问什么 –

你尝试过什么样的JavaScript？如果我告诉过你想要做的是创建表单（就像你在例子中看到的那样），并将它隐藏在按钮下面直到被点击，这对你有意义吗？ – Jhecht

首先在span元素中包装注册和登录锚以保持可读性。为注册锚点提供一个ID，以便我们可以对其进行动画处理，并在注册锚点后立即添加一个最初隐藏的表单。

<body> 
<header class="header"> 
    <div class="wrap"> 
    <span id="animationSandbox" style="display: block;"><h1 class="site__title mega">CONCUR</h1></span> 
    <span class="beta subhead">Verifiable &#8226; Public &#8226; News</span> 
    </div> 
</header><!-- /.site__header --> 
    <h5 class="credit">-Product of BRIMM-</h5> 
    <div class="sign"> 
    <span id="signupSpan"> 
    <a id="signup" href="#" class="up">Join the loop</a> 
    <form id="joinform" action="??????" class="join" style="display:none;"> 
     <label for="email" class="subhead">Email</label> 
     <input name="email" style="width: 120px;" class="subhead"> 
     <input type="submit" value="Send"> 
    </form> 
</span> 
    <span> 
    <a href="#" class="in">SIGN IN</a> 
    </span> 
</div> 
    <div id="joinformdiv" class="join" style="display:none;border:1px solid red; padding: 10px;position:absolute;"> 
    </div> 
</body>

并修改CSS以包含与'up'类相同但没有转换的新类。这被分配给表单，以便它具有与按钮相同的外观。

.join { 
    background-color:#FFF; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:5px; 
    border:2px solid #ff0000; 
    color:#ff0000; 
    font-family:Quicksand; 
    font-size:20px; 
    padding:10px 10px; 
    padding-bottom:12px; 
    text-decoration:none; 
    margin-right: 30px; 
    margin-top: 20px; 
    box-shadow: 0px 0px 130px -18px #ff0000; 
}

然后包括jQuery库，并添加脚本：

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js">  </script> 

$(document).ready(function() { 
    $("#signup").on("click", function(e){ 
     $("#signup").fadeOut(400, function(){ 
       $("#joinform") 
       .css({opacity: 0, display: "inline"}) 
      .animate({opacity: 1},400, function(){ $("#email").focus()}) 
     }) 
    }) 
});

这里发生的事情是，当点击注册按钮，当它淡出，然后隐藏的形式有其不透明度设置为使它不可见并且其显示设置为内联。这很重要，因为表单是一个块元素，如果w只是使用了fadeIn（），它会将其他内容向下推送到页面上。然后，我们使用animate（）命令将不透明度设置为1，从而使元素完全可见。

与使用位置和绝对显示来固定电子邮件表单在按钮上的位置不同，此方法将电子邮件表单放在按钮的相同父元素内，以便滚动不会导致问题。

来源

2016-11-19 23:45:29

其运行良好，唯一的问题是，当我重新调整我的页面时，电子邮件形式移动，加入循环按钮仍然存在。 –

编辑答案以适合您的问题。 –

唯一的问题是，当我点击“加入循环”后，当我重新缩放窗口时，电子邮件表单在整个页面上移动。它虽然工作。 –

我认为最简单的方法就是更换DIV含量INPUT您可以调整造型，这是你的起点:)

<div class="sign"> 
    <a href="#" class="up" onClick="this.parentNode.innerHTML='<input />'">Join the loop</a> 
    <a href="#" class="in">SIGN IN</a> 
    </div>

工作示例：https://jsfiddle.net/hkr95odp/2/

迎接。

来源

2016-11-19 23:24:53

一个按钮转变成一个简单的电子邮件形式

回答

相关问题