ボタンが簡単なメールフォームに切り替わります

私はボタンが完成しており、それはアクティブでホバリングCSSエレメントを持つ基本です。私は「Join the Loop」ボタンをクリックすると、そのような簡単な電子メールフォームに変わります。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

です...コードはどこですか？ – Jhecht

申し訳ありませんコメントを編集中です。これは何かを尋ねる私の初めてのことです –

どのようなJavaScriptを試してみましたか？私があなたにしたいことはフォームを作成して（あなたの例に見られるように）、それがクリックされるまでボタンの下に隠されていれば、それは意味をなさないでしょうか？ – Jhecht

まず、スパン要素に署名と署名のアンカーをラップして、物を読みやすくします。私たちがそれをアニメートできるようにサインアップアンカーに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>

そして、 'up'クラスと同じ新しいトランジションを含むようにcssを変更します。これは、フォームと同じ外観になるようにフォームに割り当てられます。

.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()}) 
     }) 
    }) 
});

は、隠されたフォームがその不透明度はそれを作るために設定されている、サインアップボタンがクリックされたときに、それがフェードアウトということです表示はインラインに設定されています。これはフォームがブロック要素であり、fadeIn（）を使用しただけで他のコンテンツをページの下に押し込むので重要です。次に、animate（）コマンドを使用して不透明度を1にアニメーション化し、要素を完全に表示します。

電子フォームの位置をボタンに固定するためにpositionとdisplay absoluteを使用するのとは異なり、このアプローチでは、スクロールしても問題が発生しないように電子メールフォームをボタンの同じ親要素に配置します。

出典

2016-11-19 23:45:29

うまく、問題は私が私のページをrescaleときにメールフォームが移動し、ループボタンがまだそこに参加しているということです。 –

あなたの問題に合わせて編集された回答。 –

問題は、「ループに参加する」をクリックした後にウィンドウを再スケーリングすると、電子メールフォームがページ全体に移動することです。それはしかし、動作します。 –

である私は、これはあなたの開始点がある:)

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

、あなたはスタイリングを調整することができます最も簡単な方法は、ちょうどINPUTでDIVコンテンツを交換することだと思います実施例：https://jsfiddle.net/hkr95odp/2/

挨拶。

出典

2016-11-19 23:24:53

ボタンが簡単なメールフォームに切り替わります

答えて

関連する問題