Home/ Questions/Q 7826283
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T09:19:59+00:00

the below code works fine but my requirement is little different then what it

  • 0

the below code works fine but my requirement is little different then what it is doing right now,

My question is:

How to display a message with an close button on the right and image on the left and message something like this in the below sketch

----------------------------------------------
                                          [x]
[img]      Save/Update successfully             
----------------------------------------------

so when the user click on little x should dismiss the div box.

here is what i have so far.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
    .error-notification {
        background-color:#AE0000;
        color:White;
        display:none;
        cursor:pointer;
        padding:15px;
        padding-top: 0;
        position:absolute;
        z-index:1;
        font-size: 100%;
    }

    .error-notification h2 {
        font-family:Trebuchet MS,Helvetica,sans-serif;
        font-size:140%;
        font-weight:bold;
        margin-bottom:7px;
    }
</style>
</head>
<body>
<input type="button" class="showme" value="Show me the Dialog!"><br><br><br><br>

<script>
    $('.showme').click(function () {
        $('.error-notification').remove();
        var $err = $('<div>').addClass('error-notification')
                             .html('<h2>Paolo is awesome</h2>(click on this box to close)')
                             .css('left', $(this).position().left);
        $(this).after($err);
        $err.fadeIn('fast');
    });
    $('.error-notification').live('click', function () {
        $(this).fadeOut('fast', function () { $(this).remove(); });
    });

</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you add the error message HTML, include the markup for a close button and an image.then in javascript, bind the click event of close button to close the message box. Some thing like this.

    $(function()
{
  $('.showme').click(function () {
     $('.error-notification').remove();
     var $err = $('<div>').addClass('error-notification')
    .html('<div><img class="imgClose" src="http://www.mobissimo.com/images/module-close.png" /><p><img src="http://www.mousescrappers.com/forums/xperience/icons/teacups24.png" /><h2>Paolo is awesome</h2>(click on this box to close)</p></div>')
    .css('left', $(this).position().left);
     $(this).after($err);
     $err.fadeIn('fast');
  });
  $('.imgClose').live('click', function () {
      $(this).parent().fadeOut('fast', function () { $(this).parent().remove(); });
  });
});

    Working sample http://jsfiddle.net/xL9Pv/12/

    • 0