添加/通過點擊，點擊按鈕刪除一個div覆蓋，或退出鍵

我有一個基本的div覆蓋其功能在輸入框裏面用戶點擊：添加/通過點擊，點擊按鈕刪除一個div覆蓋，或退出鍵

HTML

<html> 
<body> 
    <input id="search" type="text" placeholder="Search..."> 
</body> 
</html>

CSS

#overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #000; 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
    z-index: 10000; 
    display: block; 
}

$(function() { 
    var overlay = $('<div id="overlay"> </div>'); 
    $("#search").one('click', function(e) { 
     overlay.appendTo(document.body) 
    }); 
});

我的總體目標是通過單擊輸入框外部，按下退出按鈕或單擊我打算放在窗體右側的按鈕來使該div「隱藏」。從目前的情況來看，最好的方法是什麼？

來源

2013-12-11 Carl Edwards

你的意思是'$（ '＃覆蓋'）刪除（）'？ –

刪除它將是理想的，但將此特定刪除分配給提到的三個點擊功能就是問題所在。 –

你有沒有試過把它連接到模糊事件？ –

喜歡的東西

jQuery(function ($) { 
    $("#search").on('click', function (e) { 
     if (!$('#overlay').length) { 
      $('body').append('<div id="overlay"> </div>') 
     } 
    }).keyup(function (e) { 
     if (e.which == 27) { 
      $('#overlay').remove(); 
     } 
    }).blur(function (e) { 
     $('#overlay').remove(); 
    }); 
    $('body').click(function (e) { 
     if (!$(e.target).is('#search')) { 
      $('#overlay').remove(); 
     } 
    }) 
});

演示：Fiddle

來源

2013-12-11 03:02:28

添加/通過點擊，點擊按鈕刪除一個div覆蓋，或退出鍵

回答

相關問題