2013-05-28 2 views
0

У меня есть веб-сайт, который имеет две ссылки в верхней части страницы, «Login | Register». когда либо щелкнут, они открывают окно leanModal. Все это работает нормально, проблема у меня есть в окне регистрации, есть ссылка, которая имеет возможность входа в систему, когда пользователь нажимает на эту ссылку, теоретически окно регистра должно закрываться, и окно входа в систему должно открываться , к сожалению, это не так, поскольку оба окна остаются открытыми. Я хотел бы знать, как закрыть и открыть различные модальные окна одним щелчком мыши, если это возможно.leanModal close and open other window function

Пример кода:

<script type="text/javascript"> 
     $(function() { 
      $('a[rel*=leanModal]').leanModal({ top : 200, overlay: 0.8, closeButton: ".modal_close" });  
     }); 
</script> 






    **nav** 
    <div id="reg"> 
    <a rel="leanModal" href="#signup">LOGIN</a>| 
    <a rel="leanModal" href="#register">REGISTER</a>  </div> 
    **nav end** 




**register** 
    <div id="register" align="left" > 
    <div id="register-header"> 

      <h2>REGISTER NEW ACCOUNT</h2> 
      <a class="modal_close" href="#"></a> 
      </div> 

<div id="register-ct"> 
<form action="register-action.cfm" method="post" id="register-new"> 
<div class="txt-fld"> 
       <label for="">User Full Name</label> 
       <input id="" name="user_full_name" type="text" class="required"/> 
       </div> 
       <div class="txt-fld"> 
       <label for="">Username</label> 
       <input id="" name="user_name" type="text" class="required"/> 

       </div> 
       <div class="txt-fld"> 
       <label for="">EMAIL ADDRESS</label> 
       <input id="" name="user_email" type="email" class="required"/> 
       </div> 
       <div class="txt-fld"> 
       <label for="">PASSWORD</label> 
      <input id="" name="user_password" type="password" class="required"/> 

       </div> 
       <div class="btn-fld" align="center"> 
<input id="submit" name="submit" type="submit" value="Submit">&nbsp; &nbsp; 
    <input type="reset" name="Reset" id="reset" value="Reset" /> 
    </div> 
</form> 
    </div> 


    <p class="pmod">Already a member? <a rel="leanModal" href="#signup">SIGN IN</a></p> 
    </div> 

Войти

<div id="signup"> 
     <div id="signup-ct"> 
      <div id="signup-header"> 
       <h2>USER LOGIN</h2> 
       <a class="modal_close" href="#"></a> 
      </div> 

      <form action="login-action.cfm" method="post"> 

       <cfoutput> 
       <input name="url" type="hidden" value="#currentURL#" /> 
       </cfoutput> 
       <div class="txt-fld"> 
       <label for="">EMAIL ADDRESS</label> 
       <input id="" name="user_email" type="text" /> 
       </div> 
       <div class="txt-fld"> 
       <label for="">PASSWORD</label> 
       <input id="" name="user_password" type="password" /> 

       </div> 
       <div class="btn-fld"> 
    <input id="submit" name="submit" type="submit" value="Submit"> 
      <input type="reset" name="Reset" id="reset" value="Reset" /> 
      </div> 
      </form> 
     </div> 
    </div> 

Я хотел бы эту ссылку:

**<p class="pmod">Already a member? <a rel="leanModal" href="#signup">SIGN IN</a></p>** 

придется работать, чтобы закрыть окно регистров и сразу открыть журнал в окне.

Заранее спасибо.

Джон

ответ

0

Цели: закрыть текущую модальность, когда вы будете нажать вы «Login» в окне реестра, затем откройте Вход модальность.

Сначала вам нужно отредактировать свои js.

1/Добавить ссылку в окне реестра:

<p class='signup-link'> 
    You already have an account? <a rel="leanModal" name="login" href="#login">Log In</a> 
</p> 

2/Редактирование JS Добавить опцию по умолчанию:

var defaults={top:100,overlay:0.5,closeButton:null,signuplink:".signup-link"}; 

Новая опция "signuplink" и вы положили название предыдущего класса по вашей ссылке

3/Then Добавить новую функцию:

function close_modal_id(modal_id){$(modal_id).css({"display":"none"})}}})})(jQuery); 

Эта функция будет закрыта только ваша модальность, а не вашего #lean_overlay

4/Вашей функции, чтобы закрыть окно регистра

$(o.signuplink).click(function(){close_modal_id("#signup")}); 

5/Добавить новый вариант на вашем HTML, если вы хотите для его изменения

$('a[rel*=leanModal]').leanModal({ top : 200, overlay:0.85, closeButton: ".btn-close", signuplink:".signup-link" }); 

Это все!

Итак:

В вашей HTML странице, вы будете иметь, что в вашей голове:

<script type="text/javascript"> 
     $(function() { 
      $('a[rel*=leanModal]').leanModal({ top : 200, overlay:0.85, closeButton: ".btn-close", signuplink:".signup-link" });   
     }); 
</script> 

Тогда эта ссылка в окне реестра:

<p class='signup-link'> 
    You already have an account? <a rel="leanModal" name="login" href="#login">Log In</a> 
</p> 

И, наконец, это Js код изменен:

// leanModal v1.1 by Ray Stone - http://finelysliced.com.au 
// Dual licensed under the MIT and GPL 

(function ($) {$.fn.extend({leanModal: function (options) {var defaults = { top: 100, overlay: 0.5, closeButton: null, signuplink: ".signup-link" };var overlay = $("<div id='lean_overlay'></div>");$("body").append(overlay);options = $.extend(defaults, options);return this.each(function() {var o = options;$(this).click(function (e) {var modal_id = $(this).attr("href");$("#lean_overlay").click(function() { close_modal(modal_id) });$(o.closeButton).click(function() { close_modal(modal_id) });$(o.signuplink).click(function() { close_modal_id("#signup") });var modal_height = $(modal_id).outerHeight();var modal_width = $(modal_id).outerWidth();$("#lean_overlay").css({ "display": "block", opacity: 0 });$("#lean_overlay").fadeTo(200, o.overlay);$(modal_id).css({ "display": "block", "position": "fixed", "opacity": 0, "z-index": 11000, "left": 50 + "%", "margin-left": -(modal_width/2) + "px", "top": o.top + "px" });$(modal_id).fadeTo(200, 1); e.preventDefault()})});function close_modal(modal_id) { $("#lean_overlay").fadeOut(200); $(modal_id).css({ "display": "none" }) };function close_modal_id(modal_id) { $(modal_id).css({ "display": "none" }) }}})})(jQuery);