在simplemodal中加载另一个插件

时间:2011-02-19 22:51:02

标签: jquery simplemodal

我正在使用Eric Martin优秀的simplemodal插件来创建注册表单。我想使用另一个插件来提供密码字段屏蔽和取消屏蔽(为此我使用来自prothemer的showPassword jquery插件)。我已经尝试了这个和其他几个这样的插件,并且无法让它们在一个简单的模式对话框中工作,我很确定我没有编写调用来正确加载其他插件。我查看了simplemodal网站上的示例,看不出我出错的地方。一些智慧的话语将不胜感激!

在我的html表单中,我有这个:

    <div id="register_form" style='display:none'>
    <div id="r_status" align="left">
        <h1>Register now - it's free!</h1>
        <center><div id="register_response"><!-- spanner --></div></center>
        <form id="register" action="javascript:alert('registered!');">
            <div id="register_form_elements">
                <p class="register_username">
                    <label>Username</label>
                    <input id="username" name="username" type="text" placeholder="Your username" tabindex="1" accesskey="u"autofocus maxlength="30" />
                </p>
                <p class="register_password">
                    <label for="reg_password">Password (<div class="checker"></div>)</label>
                    <input type="password" id="reg_password" tabindex="2" accesskey="p" name="password" maxlength="15" />

                </p>
                <p class="register_email_address">
                    <label>Your email address:</label>
                    <input id="emailaddress" name="emailaddress" type="text" placeholder="Email address" tabindex="1" accesskey="u"autofocus maxlength="30" />
                </p>
                <p class="register_button_holder">
                    <input value="Register now!" name="register" id="submit" class="register_button" type="submit" />
                </p>
            </div><!-- end div register_form_elements -->
            <div id="register_information">
                <h3>Stand by to:<h3>
                <ul>
                    <li>Download your personal, permanent code.</li>
                <li>Lorem ipsum dolor sit amet, consectetur</li>
                </ul>
                <p>
                    Already registered?<br />
                    <a href="index.php?action=login">Log in here</a>
                </p>
            </div> <!-- end div register_information -->
            <div class="clearboth">
                <p class="legalese">
                    By clicking this button you agree to the <a href="tanc.php">terms and conditions</a> and <a href="privacy_policy.php">privacy policy</a>
                </p>
            </div> <!-- end div clearboth -->   
            <div id="ajax_loading">
            <img align="absmiddle" src="images/spinner.gif">&nbsp;Processing...
            </div> <!-- end div ajax_loading -->
        </form>
    </div> <!-- end div r_status -->
</div> <!-- end div register_form -->

在我的js文件中,我有这个:

$(document).ready(function(){   
$(".register_link").click(function(){
    $('#register_form').modal({
        overlayId:'r_simplemodal-overlay',
        containerId:'r_simplemodal-container',
        opacity: 70, 
        onShow: function(dialog){
        $('#reg_password').showPassword('.checker', { text: 'Show text', name: 'showmypass' });
        } // end onShow
    }); // end modal        
}); // end login_link.click function

// When the form is submitted
$("#r_status > form").submit(function(){  
    // Hide 'Submit' Button
    $('#submit').hide();
    // Show Gif Spinning Rotator
    $('#ajax_loading').show();
    // 'this' refers to the current submitted form  
    var str = $(this).serialize();  
    // -- Start AJAX Call --
    $.ajax({  
        type: "POST",
        url: "signup.php",  // Send the login info to this page
        data: str,  
        success: function(msg){        
            $("#status").ajaxComplete(function(event, request, settings){  
                 // Show 'Submit' Button
                $('#submit').show();            
                // Hide Gif Spinning Rotator
                $('#ajax_loading').hide();  
                // if the login was successful
                if(msg == 'OK') {  
                    var login_response = '<div id="registered">' +
                        '<div style="width: 350px; float: left; margin-left: 70px;">' + 
                        '<div style="width: 40px; float: left;">' +
                        '<img style="margin: 10px 0px 10px 0px;" align="absmiddle" src="images/ajax-loader.gif">' +
                        '</div>' +
                        '<div style="margin: 10px 0px 0px 10px; float: right; width: 300px;">'+ 
                        "You are successfully registered! <br /> Please wait while you're redirected...</div></div>";                   
                    $('a.modalCloseImg').hide();                    
                    $('#r_simplemodal-container').css("width","500px");
                    $('#r_simplemodal-container').css("height","120px");
                    $(this).html(login_response); // Refers to 'status'
                    // After 3 seconds redirect the 
                    setTimeout('go_to_private_page()', 3000); 
                } else {  
                    // login was unsuccessful
                    var register_response = msg;
                    $('#register_response').html(register_response);
                } // end if msg == OK             
            }); // end ajaxComplete function                   
        } // end function (msg)        
    }); // end Ajax call
    return false;
}); // end register form submit function
}); // end document ready function

function go_to_private_page() {
    window.location = 'user/index.php'; // Members Area
}

我预计这将导致屏蔽密码输入字段,并在.checker范围内显示复选框和消息,以将字段转换为纯文本。但是,我只是得到了蒙面文本 - 没有复选框。

我确定我犯了一个非常基本的错误,但看不到它。救命啊!

伊恩。

1 个答案:

答案 0 :(得分:0)

你能不能展示一下你的标记,因为看起来你的jQuery应该通过我在jsfiddle上拼凑的一个例子来工作。