一個按鈕轉變成一個簡單的電子郵件形式

我有一個完成的按鈕，它是基本的活動和懸停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

一個按鈕轉變成一個簡單的電子郵件形式

回答

相關問題