Home/ Questions/Q 335023
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T10:06:36+00:00

I am trying to do something similar to the alert box that we get

  • 0

I am trying to do something similar to the alert box that we get here on SO when we get new comments and answers, the orange box that sticks to the top of the screen, I have something similar but I am trying to get an X close link on it, to close it on click

Here is what I have but it is giving me errors saying the close_error_click() is not defined?

<script type="text/javascript" >
function close_error_click(){
    $("#notify-container").fadeOut("slow", function () {
    $("#notify-container").remove();
}
</script>

<div id="notify-container">
some other code here
<a onclick="close_error_click" title="dismiss this notification">×</a>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Rather than using an onlick attribute, you can add the following line after your function:

    $("#notify-container a").click(close_error_click);

    This technique known as Unobtrusive JavaScript keeps your markup clean from Javascript. Here’s a complete example:

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(function()
        {
            $("#notify-container a.close").click(function()
            {
                $("#notify-container").fadeOut("slow", function()
                {
                    $(this).remove();
                });
            });
        });
        </script>
    </head>
    <body>
        <div id="notify-container">
            some other code here
            <a href="#" class="close" title="dismiss this notification">×</a>
        </div>
    </body>
</html>
    • 0