1

下面的代码工作正常，但我的要求与它现在正在做的略有不同，

我的问题是：

如何在右侧显示带有关闭按钮的消息，在左侧显示带有图像的消息，并在下面的草图中显示类似这样的消息

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

所以当用户点击小 x 时应该关闭 div 框。

这是我到目前为止所拥有的。

<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>
4

2 回答 2

1

添加错误消息 HTML 时，包括关闭按钮和图像的标记。然后在 javascript 中，绑定关闭按钮的单击事件以关闭消息框。像这样的东西。

$(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(); });
  });
});

工作示例http://jsfiddle.net/xL9Pv/12/

于 2012-04-21T18:37:20.220 回答
0

与您尝试创建的对话框匹配，然后对其应用DIVjQuery 。基本示例在这里display:nonedialog

http://jqueryui.com/demos/dialog/#animated

jNotify 是一个提供一些附加功能的 jQuery 插件。演示在这里：

http://www.myjqueryplugins.com/jNotify/demo

于 2012-04-21T18:28:15.930 回答