添加關閉按鈕燈箱

我一直試圖添加一個關閉按鈕（右上角）此燈箱有一段時間沒有成功。任何人都可以發送一個工作的JSFiddle或Codepen與添加的關閉功能？添加關閉按鈕燈箱

謝謝

http://codepen.io/stoypenny/pen/pJkcK

這是JS

var $overlay = $('<div id="overlay"></div>'); 
var $image = $("<img>"); 

$overlay.append($image); 
$("#body").append($overlay); 

$("#imageGallery a").click(function(event){ 
    event.preventDefault(); 

    //Get image link 
    var imageLocation = $(this).children().attr("src"); 
    //Add image source to the image 
    $image.attr("src", imageLocation); 
    //Set styles so that the image doesn't display at resolutions beyond the screen size 
    $image.css({maxWidth: "70%", maxHeight: "70%", marginTop: "10%" }); 
    //Display the overlay 
    $overlay.show(); 
}); 

//When overlay is clicked 
$overlay.click(function(){ 
    //Hide the overlay 
    $overlay.hide(); 
});

來源

2017-05-22 samish

這裏是一個快速解決您的問題，將它添加到你的CSS文件：

#overlay:after { 
    width: 40px; 
    height: 40px; 
    content: 'X'; 
    padding: 0; 
    margin: 0; 
    background: red; 
    border-radius: 50%; 
    color: #FFF; 
    line-height: 40px; 
    text-align: center; 
    position: absolute; 
    top: 0; 
    right: 0; 
    cursor: pointer; 
}

我相信有更好的另一種選擇，但這應該至少讓你現在去，直到你找到一個更好的解決方案。

來源

2017-05-22 21:37:25 Michael

非常感謝。任何方式讓它出現在圖像本身的右上角？再次感謝 – samish

測試一些配偶 - 是的，這將是它的理想場所，但迄今爲止我沒有嘗試過的雪茄 - 這就是爲什麼我把這個「快速」解決方案給你......如果我可以想出更好的東西，我會更新我的答案。 – Michael

你知道如何添加懸停效果嗎？因此，如果我將鼠標懸停在x按鈕上，它會發生一些變化？ – samish

添加關閉按鈕燈箱

回答

相關問題