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

作成しようとしているダイアログに一致する を作成し、それに jQuery を適用DIVします。基本的な例はこちらdisplay:nonedialog

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

jNotify は、いくつかの追加機能を提供する jQuery プラグインです。デモはこちら:

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

于 2012-04-21T18:28:15.930 に答える