0

嗨，我如何使用leanModel 对话框呈现不同的表单？目前，这就是精益模型的工作方式：

<a id="go" rel="privateMsg" name="signup" href="#signup">With Close Button</a>

<div id="signup" style="display: none; position: relative; opacity: 1; z-index: 11000; left: 50%; margin-left: -202px; top: 200px;">
            <div id="signup-ct">
                <div id="signup-header">
                    <h2>Create a new account</h2>
                    <p>It's simple, and free.</p>
                    <a class="modal_close" href="#"></a>
                </div>

                <form action="">

                  <div class="txt-fld">
                    <label for="">Username</label>
                    <input id="" class="" name="" type="text">

                  </div>
                  <div class="txt-fld">
                    <label for="">Email address</label>
                    <input id="" name="" type="text">
                  </div>
                  <div class="txt-fld">
                    <label for="">Password</label>
                    <input id="" name="" type="text">

                  </div>
                  <div class="btn-fld">
                    <a href="#" class="close">Cancel</a>
                  <button type="submit">Sign Up</button>
                  </div>


                 </form>
            </div>
        </div>

$(function() {
    $('a[rel*=privateMsg]').leanModal({ top : 100, closeButton: ".modal_close,.close" });
});

精益模型 js 如下：

(function($){
    $.fn.extend({
        leanModal:function(options){
            var defaults={top:100,overlay:0.5,closeButton:null};
            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);
                    });
                    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":"100px"});
                    $(modal_id).fadeTo(200,1);e.preventDefault()
                });
            });
            function close_modal(modal_id){
                $("#lean_overlay").fadeOut(200);$(modal_id).css({"display":"none"})
            }
        }
    });
})(jQuery);

我如何改进此代码以便我可以为任何表单打开一个对话框？另外，如果我想从 ajax 加载注册 div，我该怎么做？谢谢

4

0 回答 0