1

プロジェクトにモーダルポップアップを実装しようとしていますが、jsfiddleで必要なものが見つかりました。モーダルに使用しているhtmlとcssはわかりますが、使用しているjsがわかりません。

彼らがモーダルに使用しているJavaScriptを教えてください。ログインボタンをクリックすると、モーダルポップアップが開きます。

http://jsfiddle.net/VSsLC/

http://jsfiddle.net/VSsLC/embedded/result/

これが以下のhtmlコードです

<div class="modal hide fade" id="login-modal" style="display: none;">
    <a class="close" data-dismiss="modal">×</a>
    <h1>Log in to Kippt</h1>

    <form class="connect-button" name="login" method="post" action="/social/twitter/redirect/" id="twitter-connect-form">
    <div style="display:none"><input type="hidden" name="csrfmiddlewaretoken" value="MNH48hjwVMrGUWcpNqIt4qa1nko6RWdo"></div>

    <a href="#" onclick="$('#twitter-connect-form').submit(); return false;" class="signup-twitter signup-btn" id="twitter_button"><i></i>Log in with Twitter</a>
    </form>
    <form class="connect-button" name="login" method="post" action="/social/facebook/redirect/" id="facebook-connect-form">
      <div style="display:none"><input type="hidden" name="csrfmiddlewaretoken" value="MNH48hjwVMrGUWcpNqIt4qa1nko6RWdo"></div>

      <a href="#" onclick="$('#facebook-connect-form').submit(); return false;" class="signup-facebook signup-btn" id="facebook_button"><i></i>Log in  with Facebook</a>
      </form>

      <form action="/login" method="POST" autocomplete="off"><div style="display:none"><input type="hidden" name="csrfmiddlewaretoken" value="MNH48hjwVMrGUWcpNqIt4qa1nko6RWdo"></div>

        <fieldset>
            <h5>or with Kippt account</h5>
            <input type="text" placeholder="Username or email" name="username" maxlength="30" id="id_username">
            <input type="password" placeholder="Password" name="password" id="id_password">
            <input type="submit" value="Log in" class="btn">
        </fieldset>
         <a href="/accounts/password/reset/"><span>Forgot password?</span></a> · <a href="/signup/"><span>Sign up to Kippt</span></a>
     </form>
</div>
4

2 に答える 2

0

https://kippt.com/サイトへの直接リンクを投稿して、サインアップ フォームの作成方法を尋ねることができます。
彼らの Javascript が難読化されすぎて、有用なものを理解できないことは明らかですが、私は彼らがjQueryを使用していることを確認しました。Google で少し検索したところ、bootstrap modalと呼ばれる非常によく似たエフェクト ライブラリがあることがわかりました。
jQuery を使用して、彼らがこの効果を自分で作成した可能性を考慮する必要があります。

于 2013-02-26T23:35:22.053 に答える
0

あなたの質問はあまり明確ではありませんが、私がよく理解していれば、あなたはjsファイルを探しています. そのため、多くの開発者ツール (chrome、firefox、safari) を使用して、任意のブラウザーにアクセスできます。たとえば、Chrome では、開発者ツールに移動してコンソールを表示し (Mac では cmd+option+i)、resssources/Frames/Scripts に移動すると、js ファイルが見つかります。

于 2013-02-26T23:39:39.543 に答える