javascript onclick create(element) div viz弹出框_编程设计

我正在尝试创建一个弹出框，它会在单击按钮时被调用，这就是我目前所拥有的.. http://jsfiddle.net/WGPhG/2/

请您参考如下方法:

这是一个真正做你想做的 fiddle - http://jsfiddle.net/WGPhG/6/

function popUp(){ 
    var popup = document.createElement('div'); 
    popup.className = 'popup'; 
    popup.id = 'test'; 
    var cancel = document.createElement('div'); 
    cancel.className = 'cancel'; 
    cancel.innerHTML = 'close'; 
    cancel.onclick = function (e) { popup.parentNode.removeChild(popup) }; 
    var message = document.createElement('span'); 
    message.innerHTML = "This is a test message"; 
    popup.appendChild(message);                                     
    popup.appendChild(cancel); 
    document.body.appendChild(popup); 
}

注意事项

要在元素上设置类，您可以使用 element.className 而不是 element.class。对于 cancel 元素上的 onclick 事件处理程序，最好直接为 onclick 处理程序分配一个匿名函数，就像我上面的示例中那样执行您需要的操作。

编辑(更有效的方式)

这实际上比获得您想要的结果要好得多，因为每次显示弹出窗口时都不需要重新创建元素。 fiddle - http://jsfiddle.net/WGPhG/7/

CSS

.popup 
{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    margin:100px auto; 
    width:200px; 
    height:150px; 
    font-family:verdana; 
    font-size:13px; 
    padding:10px; 
    background-color:rgb(240,240,240); 
    border:2px solid grey; 
    z-index:100000000000000000; 
    display:none 
} 
 
.cancel 
{ 
    display:relative; 
    cursor:pointer; 
    margin:0; 
    float:right; 
    height:10px; 
    width:14px; 
    padding:0 0 5px 0; 
    background-color:red; 
    text-align:center; 
    font-weight:bold; 
    font-size:11px; 
    color:white; 
    border-radius:3px; 
    z-index:100000000000000000; 
}

HTML

<button onClick="openPopup();">click here</button> 
<div id="test" class="popup"> 
    This is a test message 
    <div class="cancel" onclick="closePopup();"></div> 
</div>

function openPopup() { 
    document.getElementById('test').style.display = 'block'; 
} 
 
function closePopup() { 
    document.getElementById('test').style.display = 'none'; 
}