Question

我有一个带登录/注册表单的模态窗口。我提交两个表单中的一个后，我想阻止模态窗口消失。任何想法我该怎么办？

这是我的jQuery代码：

$(document).ready(function(){
    $('#pop2').click(function(){
        var width=$(window).width();
    width = (width/2)-350;
    $('.popup2').css('left',width+'px');

    var height=$(window).height();
    $('.popup2').css('top',(height/2)-(($('.popup2').height())/2)+'px');

        $('.trbg1').fadeIn('fast',function(){
       $('.popup2').fadeIn();
    });

     });

     $('.closep2').click(function(){
        $('.popup2').fadeOut('fast',function(){
            $('.trbg1').fadeOut();
        }); 
     });
});

这是我的HTML代码：

<div class="trbg1" style="display:none"></div>
    <div class="popup2" style="display:none">
        <div class="ppad2">
            <a href="#" class="closep2"></a>
            <div class="clear"></div>
            <div class="popleft m4">
                <span>Sunt deja client:</span>
                <form method="post" action="">
                    <label class="label1">E-mail:</label>
                    <input type="text" class="inp1" id="lemail" />
                    <label class="label1">Parola:</label>
                    <input type="text" class="inp1" id="lparola"/>                  
                    <input class="login" type="submit" value="Login"/>
                </form>
            </div>

            <div class="popleft">
                <span>Sunt client nou:</span>
                <form method="post" action="">
                    <label class="label1">Nume:</label>
                    <input type="text" class="inp1" id="nume" />
                    <label class="label1">Prenume:</label>
                    <input type="text" class="inp1" id="prenume"/>
                    <label class="label1">E-mail:</label>
                    <input type="text" class="inp1" id="iemail"/>
                    <label class="label1">Parola:</label>
                    <input type="text" class="inp1" id="iparola1"/>
                    <label class="label1">Reintrodu parola:</label>
                    <input type="text" class="inp1" id="liparola2"/>

                    <div class="m5">
                        <input type="checkbox" style="float:left;" /> <label class="label2">I agree to the Membership Agreement.*</label>
                    </div>
                    <div class="m5">
                        <input type="checkbox" style="float:left;" /> <label class="label2">Doresc sa primesc newsletter-ul periodic cu noutatile si campaniile exclusive icut.ro</label>
                    </div>
                    <br class="clear" />
                    <input class="inreg" type="submit" value="Inregistrare"/>
                </form>
            </div>

            <div class="clear"></div>                               
        </div>
    </div>

谢谢。

Answer 1

要在Modal窗口中显示您的错误/成功消息，您最好选择通过AJAX提交，因为您可以使用jQuery在任何地方显示您的响应。

例如：

为您的登录表单提供id login1，如下所示：

 <div class="popup2" style="display:none">
        <div class="ppad2">
            <a href="#" class="closep2"></a>
            <div class="clear"></div>
            <div class="popleft m4">
                <span>Sunt deja client:</span>
                <form **id="login1"** method="post" action="">

然后将其添加到您的JS

$('#login1').submit(function(e) {
e.preventDefault();
var procUrl = "ajax.php"; //you need to run ajax processing in an external file
var formData = $(this).serialize();
var _this = this;
$.ajax({
type: 'POST',
url: procUrl,
data: formData,
success: function(response) {
$('.popup2').html(response);
}
})
})

那会将处理脚本的输出添加到你的模态，所以如果错误回应“你没有这样做那么多”;

你没有这样做，而就会出现在你的模态中。

这很简单，但会为您提供ajax提交的起点。

Answer 2

有两种选择：

通过ajax提交表单，而不是正常的浏览器提交。
使用target属性将表单提交到隐藏的iframe（例如，在表单上设置target属性以匹配iframe上的name属性）。当我执行后者时，我通常会使用cookie来告诉我结果何时返回，并轮询cookie以及iframe的内容（但我通常在尝试提交提交时开始执行此操作下载过程，因此cookie - 成功时，根本没有任何内容写入iframe。

Answer 3

我建议使用jQuery Form plugin，这样可以通过Ajax轻松提交表单。

除了执行Ajax-y之外，它还允许您捕获服务器的响应，因此您可以在保持模态打开的同时执行错误处理和验证等操作。

在表单提交后保持模态窗口

3 个答案: