Question

我的网站顶部有两个链接，“登录|注册”。当点击其中任何一个时，他们打开一个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>**

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

提前致谢。

约翰

Answer 1

目标是：当您在注册窗口中单击“登录”时关闭当前模态，然后打开登录模式。

首先你需要编辑你的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，请在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);

leanModal关闭并打开其他窗口功能

1 个答案: