は</p> <p>私の質問は、メッセージでのdivボックスを表示し、onclickの以下のコードは正常に動作しますが、私の要件は、それが今やっていること、その後少し違う

を解任します下のスケッチで、このような左とメッセージ何か右画像上の閉じるボタンは</p> <p>私の質問は、メッセージでのdivボックスを表示し、onclickの以下のコードは正常に動作しますが、私の要件は、それが今やっていること、その後少し違う

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

出典

2012-04-21 Nick Kahn

あなたが求めている問題は何ですか？ –

私の質問がもっと明確になるように更新しました –

エラーメッセージHTMLを追加し、メッセージボックスを閉じるには閉じるボタンのクリックイベントをバインドし、閉じるボタンのマークアップとJavaScriptでimage.thenが含まれます。このようなもの。

$(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-21 18:37:20 Shyju

.live（）は新しい/現在のjQueryで廃止されました。 – fortboise