2013-05-28 52 views
0

我有一個網站,在頁面頂部有兩個鏈接,「登錄|註冊」。當點擊任何一個時,他們將打開一個leanModal窗口。所有這一切都工作正常,我的問題是在註冊窗口中,有一個鏈接,可以選擇登錄,當用戶點擊該鏈接,理論上,註冊窗口應該關閉,登錄窗口應該打開不幸的是,這並非如此,因爲兩個窗戶都保持打開狀態。如果可能的話,我想知道如何關閉並打開不同的模式窗口。leanModal關閉並打開其他窗口功能

示例代碼:

<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

的目標是:關閉當前模式時,您會在註冊窗口中單擊您「登錄」,然後打開登錄模式。

首先你需要編輯你的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 /然後添加一項新功能:

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);