2017-01-06 3 views
0

ОК Я сделал много поисков, прежде чем отправлять это, но я не мог получить то, что мне было нужно, вещь у меня есть всплывающее окно модальным для входа в систему/регистрациявызова метода Действие из JQuery всплывающего модального

<!--Signin/Signup container--> 
     <div id="modal" class="popupContainer" style="display:none;"> 


      <section class="popupBody"> 
       <!-- Social Login --> 
       <div class="social_login"> 
        <div class=""> 
         <a href="#" class="social_box fb"> 
          <span class="icon"><i class="fa fa-facebook"></i></span> 
          <span class="icon_title">سجل عن طريق الفيس بوك</span> 

         </a> 

         <a href="#" class="social_box google"> 
          <span class="icon"><i class="fa fa-google-plus"></i></span> 
          <span class="icon_title">سجل عن طريق كوكل</span> 
         </a> 
        </div> 

        <div class="centeredText"> 
         <span>أو استخدم الايميل الخاص بك</span> 
        </div> 

        <div class="action_btns"> 
         <div class="one_half"><a href="#" id="login_form" class="btn">Login</a></div> 
         <div class="one_half last"><a href="#" id="register_form" class="btn"> Register</a></div> 
        </div> 
       </div> 

       <!-- Username & Password Login form --> 
       <div class="user_login"> 
        <form> 
         <label>الايميل/اسم المستخدم</label> 
         <input type="text" /> 
         <br /> 

         <label>كلمة السر</label> 
         <input type="password" /> 
         <br /> 

         <div class="checkbox"> 
          <input id="remember" type="checkbox" /> 
          <label for="remember">احفظ معلومات الدخول على هذا الجهاز</label> 
         </div> 

         <div class="action_btns"> 
          <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> رجوع</a></div> 
          <div class="one_half last"><a href="#" class="btn btn_red">Login</a></div> 
         </div> 
        </form> 

        <a href="#" class="forgot_password">هل نسيت كلمة المرور؟</a> 
       </div> 

       <!-- Register Form --> 
       <div class="user_register"> 
        <form> 
         <label>الاسم الكامل</label> 
         <input type="text" /> 
         <br /> 

         <label>عنوان البريد الألكتروني</label> 
         <input type="email" /> 
         <br /> 

         <label>كلمة المرور</label> 
         <input type="password" /> 
         <br /> 

         <div class="checkbox"> 
          <input id="send_updates" type="checkbox" /> 
          <label for="send_updates">أرسل لي رسائل في حال وجود أي تحديثات</label> 
         </div> 

         <div class="action_btns"> 
          <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div> 
          <div class="one_half last"><a href="#" class="btn btn_red">Register</a></div> 
         </div> 
        </form> 
       </div> 
      </section> 
     </div> 
     <!--Signin/Signup End--> 

и это сценарий:

<script> 
      // Plugin options and our code 
      $("#modal_trigger").leanModal({ 
       top: 100, 
       overlay: 0.6, 
       closeButton: ".modal_close" 
      }); 
      $(function() { 
       // Calling Login Form 
       $("#login_form").click(function() { 
        $(".social_login").hide(); 
        $(".user_login").show(); 
        return false; 
       }); 

       // Calling Register Form 
       $("#register_form").click(function() { 
        $(".social_login").hide(); 
        $(".user_register").show(); 
        $(".header_title").text('Register'); 
        return false; 
       }); 

       // Going back to Social Forms 
       $(".back_btn").click(function() { 
        $(".user_login").hide(); 
        $(".user_register").hide(); 
        $(".social_login").show(); 
        $(".header_title").text('Login'); 
        return false; 
       }); 
      }); 
      /*--------------------------------*/ 
     </script> 
    </div> 

Теперь то, что мне нужно создать метод действия так, когда пользователь нажимает зарегистрируйтесь или войдите это дозвонились делать то, что необходимо Как я могу это сделать. мои знания в jquery и javascript - это вид ограниченного . Я буду признателен за любую помощь. спасибо заранее

+0

Если вы пытаетесь получить данные на сервер, вы устали ajax? http://api.jquery.com/jquery.ajax/ –

ответ

1

Присоединить идентификаторы к кнопкам:

<div id = "login_button" class="one_half last"><a href="#" class="btn btn_red">Login</a></div> 

Затем присоедините прослушиватель событий к ним:

$("#login_button").click(function() { 
    // Do something 
}); 

же для кнопки Register.

+0

OK Большое спасибо за быстрый ответ, поэтому я могу вызвать метод действия с помощью функции, правильно? – salRad

+0

Вы правы. Если вы хотите вызвать свой код сервера из этой функции, см. Http://api.jquery.com/jquery.ajax/ –

+0

Еще раз спасибо, что посмотрю – salRad

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