Question

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

我的问题是：

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

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

Answer 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/

Answer 2

创建DIV，display:none与您尝试创建的对话框匹配，然后对其应用jQuery dialog。基本的例子就在这里

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

jNotify是一个jQuery插件，提供了一些额外的功能。在这里演示：

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

显示带有消息和onclick dismiss的div框

2 个答案: