javascript onclick create(element) div viz 弹出框

javascript onclick create(element) div viz popup box

提问by raj_n

I'm trying to make a pop up box, which gets invoked on clicking a button, this is what I've got so far.. http://jsfiddle.net/WGPhG/2/

我正在尝试制作一个弹出框，它在单击按钮时被调用，这是我到目前为止所得到的.. http://jsfiddle.net/WGPhG/2/

回答by tjscience

Here is a fiddle that actually does what you want - http://jsfiddle.net/WGPhG/6/

这是一个实际做你想做的小提琴 - http://jsfiddle.net/WGPhG/6/

JS

JS

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);
}

NOTES

笔记

To set the class on an element you use element.className instead of element.class. For the onclick event handler on the cancel element, it is better to directly assign the onclick handler with an anonymous function that does what you need as in my example above.

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

---

---

EDIT (More Efficient Way)

编辑（更有效的方式）

This is actually a much better of getting the results that you want because there is no overhead involved with recreating the elements every time the popup is shown. Fiddle - http://jsfiddle.net/WGPhG/7/

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

CSS

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

HTML

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

JS

JS

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

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

回答by Smith Foto

Try this update on JSFiddle

在JSFiddle上试试这个更新

Changed :

改变：

1. Center page (fixed).
2. effect (fadein and fadeout)

1. 中心页面（固定）。
2. 效果（淡入淡出）

HTML

HTML

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

CSS

CSS

.popup {
    position:fixed;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;  
    margin: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;
}

.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;
}

.cancel:hover {
    background:rgb(255,50,50);
}

JS

JS

function openPopup() {
    //document.getElementById('test').style.display = 'block';
   $('#test').fadeIn(1000);
}

function closePopup() {
    //document.getElementById('test').style.display = 'none';
    $('#test').fadeOut(500);
}

回答by Split Your Infinity

I've updated your Fiddleand made it work.

我已经更新了您的Fiddle并使其正常工作。

The changed HTML...

更改后的 HTML...

 <button id="popupButton">click here</button>

Updated JavaScript...

更新了 JavaScript...

document.onreadystatechange = function () {
    function popUp() {
        var popup = document.createElement('div');
        popup.className = 'popup';
        popup.id = 'test';

        popup.innerHTML = "This is a test message";

        var cancel = document.createElement('div');
        cancel.className = 'cancel';
        cancel.onclick= function () { popup.destroy(); }
        popup.appendChild(cancel);

        document.body.appendChild(popup);
    }

    document.getElementById('popupButton').onclick = popUp;
}?

Did this answer your question or is there anything else?

这是否回答了您的问题，或者还有其他问题吗？

UpdateImproved the code and the fiddle. Now open and close works

更新改进了代码和小提琴。现在打开和关闭作品

回答by Yograj Gupta

Try This

尝试这个

function popUp(){
    var popup = document.createElement('div');
    popup.className = 'popup';
    popup.id = 'test';
    var cancel = document.createElement('div');
    cancel.className = 'cancel';
    cancel.setAttribute('onClick', 'document.getElementById("test").parentNode.removeChild('+popup +');')

    popup.innerHTML = "This is a test message";
    document.body.appendChild(popup);
    popup.appendChild(cancel);
 }