0

我有一个网站，在页面顶部有两个链接，“登录|注册”。当任何一个被点击时，它们都会打开一个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>**

必须关闭注册窗口并立即打开登录窗口。

提前致谢。

约翰

4

1 回答 1

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);
于 2014-01-24T18:11:45.363 回答