2013-02-26 2 views
1

Я пытаюсь реализовать модальное всплывающее окно для моего проекта, и я нашел то, что хотел в jsfiddle. Я могу узнать, что html и css - это то, что они используют для модального, но я не знаю, что они используют?Как получить код javascript, который вызывает всплывающее окно?

Можете ли вы рассказать мне, какой 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> 

ответ

1

Вы можете просто разместить прямую ссылку на сайт https://kippt.com/, спрашивая, как они создали свою регистрационную форму.
Понятно, что их Javascript слишком запутан, чтобы понять что-нибудь полезное, но я видел, что они используют jQuery. Сделав небольшой поиск в Google, я обнаружил, что есть очень подобная библиотека эффектов, называемая bootstrap modal.
Вы должны учитывать возможность того, что они написали этот эффект для себя, используя jQuery.

+0

может указать мне выше, что js они используют для модального – user2045025

+1

Я могу видеть загрузочную загрузку, о которой я упоминал, http://platform.twitter.com/widgets.js и https://api.mixpanel.com/site_media/js/api/ mixpanel.js – mavrosxristoforos

+0

в этом, который один .... – user2045025

0

Ваш вопрос не очень ясен, но если я хорошо понял, вы ищете js-файлы. Таким образом, вы можете перейти в любой браузер с хорошим набором инструментов для разработчиков (хром, firefox, safari). Например, в Chrome зайдите в инструменты разработки, чтобы отобразить консоль (cmd + option + i на mac), перейдите в resssources/Frames/Scripts, и вы найдете файлы js.

+0

Я не могу найти файл js для всплывающего окна – user2045025

Смежные вопросы