Loading ...

jQuery: How to show a message bar at the top of browser window | CodeAsp.Net

jQuery: How to show a message bar at the top of browser window

 /5
0 (0votes)

In this blog i will explain you how to show a pop message at the top of browser window with jQuery. There are requirements when we want to show the user some message in the form of pop up. Sometimes it doesn't feel good to show alert boxes there is a nice way to show the messages which I am going to show. Below is the screenshot how the message will look.


Here is the code snippet:

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">


        $(function () {
            $('#message').fadeIn('slow');
            $('#message a.close-notify').click(function () {
                $('#message').fadeOut('slow');
                return false;
            });
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="message" style="display: none;">
        <span>This is test message.</span> <a href="#" class="close-notify">X</a>
    </div>
    </form>
</body>
<style type="text/css">
    #message
    {
        font-family: Arial,Helvetica,sans-serif;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        z-index: 105;
        text-align: center;
        font-weight: bold;
        font-size: 100%;
        color: white;
        padding: 10px 0px 10px 0px;
        background-color: #8E1609;
    }
    #message span
    {
        text-align: center;
        width: 95%;
        float: left;
    }
    .close-notify
    {
        white-space: nowrap;
        float: right;
        margin-right: 10px;
        color: #fff;
        text-decoration: none;
        border: 2px #fff solid;
        padding-left: 3px;
        padding-right: 3px;
    }
    .close-notify a
    {
        color: #fff;
    }
</style>
</html>



Above what I have done is I took a hidden div "<div id="message" style="display: none;"> " and kept it's position fixed at the top of browser window. Now whenever I want to display a message I am making that div visible . To close the message bar there is a close link at the top right corner.

 

 

Do let me know your feedback, comments.

 

Comments (1)

   
hajan
Nice! I have been working with JNotify plugin which gives good notification bars. You have shown similar feature using only few lines of code .
6/11/2010
 · 
by

Top Posts