CODEWITHSUNDEEP
jquery
user1436649
user1436649

Reputation: 1

success or fail popup

i have a php class to show a suceess message or fail message after an action (posting a form/updating a page) currently refreshes the page and psts either 1 or 0 and then the following code - - how can i get this to just pop up and auto close...just like a green tick or cross.....assume need to use jquery - - totally lost here so any advise welcome...thanks

   <?
    $response = $_GET['response'];
    if ($response == '0') {
    echo"
    <div class=\"error message\">
                 <h5>FYI, something just happened!</h5>
                 <p>This is just an info notification message.</p>
    </div>
    ";
    }
    if ($response == '1') {
    echo"
    <div class=\"success message\">
                 <h5>FYI, something just happened!</h5>
                 <p>This is just an info notification message.</p> 
    </div>
    ";
    }
    ?>

Upvotes: 0

Views: 2770

Answers (2)

Rajesh Tandukar
Rajesh Tandukar

Reputation: 403

First try this http://jsfiddle.net/tanducar/bJ6L9/1/

If your are getting this popup message through ajax then... here is the code

$(document).ready(function(){
         ... your ajax call here
         success: function(data){
            var popup= $('<div>');
            popup.append(data);
            $('body').append(popup);
            popup.css("position","absolute");
            popup.css("top", ($(window).height() - popup.height() ) / 2+ $(window).scrollTop() + "px");
            popup.css("left", ($(window).width() - popup.width() ) / 2+ $(window).scrollLeft() + "px");

            popup.fadeOut(3000);
         }
     ......

})

Write your php code within javascript.

    <script>
    $(document).ready(function(){
<?php    
$response = $_GET['response'];
     if ($response == '0') { ?>
      var data = $('<div class="success message"><h5>FYI, something just happened!</h5> <p>This is just an info notification message.</p> </div>');
    <?php } 
        if ($response == '1') {?>
       var data = $('<div class=\"success message\"><h5>FYI, something just happened!</h5><p>This is just an info notification message.</p> </div>');
    </div>
    <?} ?>


     var popup= $('<div>');
     popup.append(data);
     $('body').append(popup);
     popup.css("position", "absolute");
     popup.css("top", ($(window).height() - popup.height()) / 2 + $(window).scrollTop() + "px");
     popup.css("left", ($(window).width() - popup.width()) / 2 + $(window).scrollLeft() + "px");
     popup.fadeOut(2000);
    });

    </script>

Upvotes: 1

Miqdad Ali
Miqdad Ali

Reputation: 6147

$(function() {
    setTimeout(function() {
        $("#message").hide('blind', {}, 500)
    }, 5000);
});

It will close your popup after 5 second

Upvotes: 0

Related Questions