ショー隠されたdivの

Question

<div id="home"> 
    <div id="logo"> </div> 

     <div id="foot"> <div class="button"> CLICK ME</div> 
      <div class="button two"> CLICK ME</div> </div> 
</div> 

<div id="show"> 
    TEST TEST TEST TEST 
</div> 

$('.button').click(function(){ 
    $('#show').show(); 
}) 

#home { 
width: 400px; 
height: 400px; 
background-color: #ccffff; 
} 

#logo { 
    width: 100%; 
    height: 300px; 
    background-color: #0099ff; 
} 

#foot { 
    width: 100%; 
    height: 100px; 
    background-color: #009999; 
} 

.button { 
width: 90px; 
height: 30px; 
background-color: red; 
margin-left: 50px; 
} 

私はGREEN、その後.SHOWこの非表示の外側をクリックした場合、私はその後、GREENは赤いボタンの上に私を見る.SHOW .button REDをクリックした場合、私はしたいと思います。

LIVE：http://jsfiddle.net/YeE4p/1/

Answer 1

これを試してみてください。これはあなたが探しているものにやや近いですか？それはあなたが求めているかを判断するのは非常に困難です

$('.button').click(function(){ 

    var $show = $('#show'); 
    var position = $(this).offset() 

    $show.css({ 
    "left": position.left + "px", 
    "top":position.top + "px" 
    }).show(); 

    $(window).bind("mousedown", function(e){ 
    if (!($(e.target).attr("id") === "show")) { 
     $("#show").hide(); 
     $(window).unbind("mousedown"); 
    } 
    }); 
}) 

Answer 2

http://jsfiddle.net/Quincy/YeE4p/4/

$('.button').click(function(event){ 
    $('#show').show(); 
    event.stopPropagation(); 
}) 

$('body').click(
    function(){ 
    $('#show').hide(); 
} 
)