Question

我在另一篇文章中找到了关于如何使用按钮创建弹出框的代码，但我想将按钮更改为自定义图像。如果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>

Answer 1

实现您所要求的最快捷方式是将<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，以Google徽标为图像： http://jsfiddle.net/k3zw2/1/

将Google徽标的src替换为您的自定义图片，瞧！：）

将按钮更改为弹出框的图像？

1 个答案: