將按鈕更改爲彈出框的圖像？

我在另一篇文章中找到了關於如何使用按鈕創建一個彈出框的代碼，但是我想將按鈕更改爲一個自定義圖像。如果somone能夠幫助我，我會非常感激。將按鈕更改爲彈出框的圖像？

這裏是的jsfiddle代碼：http://jsfiddle.net/j4c7U/

的Javascript：

window.onload = function() { 
    document.getElementById("LearnMoreBtn").onclick = function(){ 
     var overlay = document.getElementById("overlay"); 
     var popup = document.getElementById("popup"); 
     overlay.style.display = "block"; 
     popup.style.display = "block"; 
    }; 

    document.getElementById("CloseBtn").onclick = function(){ 
     var overlay = document.getElementById("overlay"); 
     var popup = document.getElementById("popup"); 
     overlay.style.display = "none"; 
     popup.style.display = "none";  
    } 
};

CSS

#overlay { 
    display:none;  
    position:fixed; 
    left:0px;   
    top:0px;   
    width:100%;  
    height:100%;  
    background:#000; 
    opacity:0.5;  
    z-index:99999; 
} 

#popup { 
    display:none; 
    position:fixed; 
    left:50%;   
    top:50%;   
    width:300px;  
    height:150px; 
    margin-top:-75px; 
    margin-left:-150px; 
    background:#FFFFFF; 
    border:2px solid #000; 
    z-index:100000;  
}

HTML

<button id="LearnMoreBtn">Learn More</button> 
<div id="overlay"></div> 
<div id="popup"> 
    Popup contents here 
    <button id="CloseBtn">ClosePopup</button> 
</div> 
<div> 
    some other content that will be behind the popup 
</div>

來源

2014-01-13 user3167464

達到什麼樣的最快方法你要求的是將<button>更改爲<img>，但保留該ID以便不中斷JavaScript。

來自：

<button id="LearnMoreBtn">Learn More</button>

到：

<img src="https://www.google.com/images/srpr/logo11w.png" width="269" height="95" id="LearnMoreBtn" />

這裏有一個更新的jsfiddle，與谷歌標誌作爲圖像： http://jsfiddle.net/k3zw2/1/

替換谷歌標誌的src到你自定義圖像和瞧！ :)

來源

2014-01-13 23:50:56 modenadude

好吧，那工作謝謝！順便說一句，我只是意識到，如果我有不止一個HTML代碼，只有第一個會打開彈出窗口，其他人不會，也可以解決這個問題嗎？ – user3167464

原因是因爲代碼使用ID，每頁只能有一個ID。你可以在技術上做出JS代碼的兩倍和三倍的補償，但這可能真的很快。你有多少彈出窗口？如果有很多，取而代之的是不同的彈出鏈接（LearnMoreBtn）和每個實例的彈出窗口，您可以改爲彈出窗口的內容取決於選擇了哪個「LearnMoreBtn」。 – modenadude

將按鈕更改爲彈出框的圖像？

回答

相關問題