CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Dan Cundy
Dan Cundy

Reputation: 2849

How can i get a message to sit on top of html?

Problem

I have a form and once it is filled out by user and submitted i would like a message to pop up over the form saying "Now sit back and relax bla bla....". also ideally i would like a button on this message to say "ok".

What i have so far?

A form that gets submitted (POSTed) via an ajax post function

$('#form1').submit(function(e)
{
e.preventDefault();
 $.ajax({
     type: 'POST',
     url: 'indextest1.php',
     data: $("#form1").serialize(),
     success: function(response) {
 $('#form1').html("<div class=\'info\'>Now sit back and relax while we go to work on your behalf, we'll keep you updated with information on our results and if you have any questions then we welcome your calls or emails on 078675675446 or [email protected]<div><div class=\'tick\'>logo");
     }
   });
});

Now instead of replacing #form1 i would like it to sit on top(above) of #form1 in a nicely formatted div/alert/etc of some sort. Similar to JS Alert box.

Is this possible given that i have to keep the "ajax posting function"?

Sorry if i have used any incorrect terminology, I'm still learning, and be no means an expert.

Example using a Picture

enter image description here

In this picture the message is sitting on top of the form and not in between.

Upvotes: 0

Views: 845

Answers (3)

Jon P
Jon P

Reputation: 19772

Step one read this article on centering divs.

Next style up your pop up in place in the html. Use a div for the pop up, with a child div for the dynamic content. Once you're happy with the look of the pop-up, add display:none to its' CSS to hide it.

Finaly in your ajax success function, update the dynamic content and display the pop up.

Your pop up HTML will look something like:

<div id="popup">
    <h2>Info <span title="click to close" class="close">X</span></h2>
    <div class="content"></div>  
</div>

Some quick and dirty styling would look something like: 

#popup{
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -150px;

    border: 1px solid #5C5C5C;    
    height:200px;
    width:300px;
    background-color:#CFC;
    display:none;
}

#popup h2
{
    font-size:1.2em;
    color:#FFF;
    background-color:#090;
    margin:0;
    padding:10px;   
    position:relative;
}

#popup h2>.close
{
    border: solid 1px #FFF;
    padding:2px;
    position:relative;  
    left:220px;
    cursor:pointer;
}

#popup .content
{
    padding:10px;
}

Change your javascript to

$(document).ready(function () {
    //Event Listener for form submit
    $('#form1').submit(function(e){
        e.preventDefault();
        console.log('Form Submitted'); //Debug line
        $.ajax({
            type: 'POST',
            url: 'indextest1.php',
            data: $("#form1").serialize(),
            error: function(){console.log('Ajax Error');}, //Debug Line
            success: function(response) {
                console.log('Ajax Success'); //Debug Line
                $('#popup .content').html("Now sit back and relax while we go to work on your behalf, we'll keep you updated with information on our results and if you have any questions then we welcome your calls or emails on xxxxxx or xxxxx");
                $('#popup').show();
            }
         });
    });        

    //Add the following event listener
    $("#popup .close").click(function(){
        $("#popup").hide();
    });
});

See it in action (roughly) here:http://jsfiddle.net/Rq3Up/

Upvotes: 1

131
131

Reputation: 1385

http://jsfiddle.net/f7EZJ/

The JSFiddle show's a working example...

<body bgcolor="#DDDDDD">
    <table class='dialog' id='dlg' style='top:0px;left:0px;width:100%;height:100%;position:absolute;' cellspacing='0px'>
        <tbody>
            <tr>
                <td onclick='return false;'>
                    <div style='margin: 0px auto; border: 1px solid black; padding: 20px; width: 200px; border-radius: 8px;'>
                        <center style='margin-top: -10px;'>
                            <b>
                                <font size='+2'>Header</font>
                            </b>
                        </center>
                        <hr style='border: 1px solid black;'/>Hai<br/>
                        <a href='#' style='float: right; margin-right: -15px;' onclick="document.getElementById('dlg').style.display = 'none'; return false;">Close</a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</body

Upvotes: 1

Dan Cundy
Dan Cundy

Reputation: 2849

solution

Using absolute positioning on div placed in the #form1 i was able to get the feedback to "float" on top of the form as depicted in pitture.

CSS

#msg{
    ;
    position:absolute;
    top:0;
    left:0;
    border: 6px solid #5C5C5C;
    height:300px;
    padding:30px;

}

HTML

Added div msg

<div class='content one'>
      <div id="contact-form" class="clearfix">

         <div id="msg"></div>//added div

         <P>Quick And Easy!</P>
        <br/>
        <P>Fill out our super swanky contact form below to get in touch with us! Please provide as much information as possible for us to help you with your enquiry.</P>
        <br/>

Changed ajax function

from

$('#form1').submit(function(e)
{
e.preventDefault();
 $.ajax({
     type: 'POST',
     url: 'indextest1.php',
     data: $("#form1").serialize(),
     success: function(response) {
 $('#form1').html("<div class=\'info\'>Now sit back and relax while we go to work on your behalf, we'll keep you updated with information on our results and if you have any questions then we welcome your calls or emails on 078675675446 or [email protected]<div><div class=\'tick\'>logo");
     }
   });
});

to

$('#form1').submit(function(e)
{
e.preventDefault();
 $.ajax({
     type: 'POST',
     url: 'indextest1.php',
     data: $("#form1").serialize(),
     success: function(response) {
 $('#msg').html("Now sit back and relax while we go to work on your behalf, we\'ll keep you updated with information on our results and if you have any questions then we welcome your calls or emails on 078675675446 or [email protected]");

     }
   });
});
</script>

Upvotes: 0

Related Questions