顯示一個div盒的消息和的onclick解僱

下面的代碼工作正常，但我的要求是有點不同的，那麼它是什麼現在在做什麼，顯示一個div盒的消息和的onclick解僱

我的問題是：

如何顯示一條消息在下面的草圖

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

所以當上小X的用戶點擊應該駁回格箱在左，消息像這樣的權利和形象的關閉按鈕。

這是我到目前爲止。

<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

什麼是你問的問題嗎？ – 2012-04-21 18:28:03

已更新我的問題，以使其更清晰 – 2012-04-21 18:38:47

當您添加錯誤消息的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中已棄用，請使用.on（） – fortboise 2015-08-12 23:11:03