Question

任何人都可以解决此问题吗？pop-up message

我有以下代码

<body>  
     <div class="contact-form-wrap responsive">

          <!--- pop-up message start --->
                <div class="status alert alert-success contact-status"></div>   
          <!--- pop-up message end --->

                    <form id="main-contact-form4" class="contact-form" name="contact-form" method="post" action="app.php" role="form">  

                    <legend style="padding-bottom: 20px; color: #708090;">Please provide us your information.</legend>

                            <!-- Name Filed Starts -->
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                             <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                                <input type="text" class="form-control" name="name" id="name" required="required" placeholder="Full Name">
                                        </div>
                                    </div>
                                </div>
                            <!-- Name Filed Ends -->

            <!---------------- Pop-up Message here ---------------->

                            <!-- Button starts -->
                                <div class="col-sm-12"> 
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-primary btn-block">Submit</button>
                                    </div>
                                </div>
                            <!-- Button Ends -->
                   </form>
                </div>
             </div>
          </body>

我喜欢在按钮顶部移动弹出消息。所以每次按下按钮弹出消息都会立即注意到。

这是我的js

 $(".contact-form").submit(function() {
    var rd = this;
    var url = "app.php";
    $.ajax({
        type: "POST",
        url: url,
        data: $(".contact-form").serialize(), 
        success: function(data) {
            $(rd).prev().text(data.message).fadeIn();
        }
    });
    return false; 
});

Answer 1

您的代码存在的问题是您根据它在DOM中的位置选择了弹出消息。您需要在适当的选择器上选择它。由于它有一个名为contact-status的类，所以让我们使用它。

变化：

$(rd).prev().text(data.message).fadeIn();

到

$('.contact-status').text(data.message).fadeIn();

从DOM中的位置选择元素是一个坏主意，因为有时（像现在一样）想要移动它们。使用适当的选择器（如id或类）将使代码保持工作，无论元素在DOM中的哪个位置。

将弹出消息传输到特定位置

1 个答案: