Question

I have made a chat window in which user can ask for support on my website.
The thing is , after he’s done and wants to close the window , he presses an ‘X’ which closes the chat window.
But I did a div here which appears in the middle of the screen and asks him if he wants to really close the windows or not.
Here is the code :

<div id="background">
<div id="stay">
<p style="font-family:Tahoma, Geneva, sans-serif;font-weight:600;font-size:19px;margin-top:10px;">Exiting the support window will delete all the conversation you had with the staff and will disconnect you from the conversation. </p>
<p style="font-family:Tahoma, Geneva, sans-serif;font-weight:600;font-size:19px;">Are you sure you want to exit ?</p>
<div id="agree">
<p>Yes</p>
</div>
<div id="cancel">
<p>No</p>
</div>
</div><!--stay end-->
</div><!--background end-->

Jquery :

$("#exit").click(function() {
        $("#livesupport").hide();
        $('html, body').animate({scrollTop:0}, 'fast');
        $("#background").toggle();
        $("body").css({ 'overflow':'hidden' });
        $.post('utility/rchat.php', { table: sessid } , 
        function(getshiton) {
        });
});

“#livesupport” is the chat window.

How do I make No an answer so when the user presses it it return back to the page and no changes made to the page , and when he presses Yes he gets to have the support window closed.

Answer 1

Instead of what you’re doing with yes and no, I would use a popup box, it’s pretty easy to do.
Your code would look like this:

$("#exit").click(function() {
    if(confirm("Are you sure you want to exit this window?")) {
        $("#livesupport").hide();
        $('html, body').animate({scrollTop:0}, 'fast');
        $("#background").toggle();
        $("body").css({ 'overflow':'hidden' });
        $.post('utility/rchat.php', { table: sessid } , 
        function(getshiton) {
        });
    }
});