如何在JavaScript函數內顯示div元素？

-3

目標是當我點擊一個按鈕時，一個javascript函數將被調用。 javascript函數內部是div標籤/元素，我想讓他們像彈出一樣。如何在JavaScript函數內顯示div元素？

的JavaScript：

$("#button").click(
    openPopUP(); 
); 

function openPopUP(){ 
var window = "<div class = 'box'>"; 
window += "Will be display as a pop up"; 
window += "</div>"; 
}

當我按一下按鈕，我知道函數被調用但框/窗口不會出現在我的html頁面上。幫幫我！

來源

2013-08-19 leeshin

看看jQuery用戶界面的[對話]（http://jqueryui.com/dialog/）部件 –

您的代碼不做任何其他比創建一個名爲窗口 – Itay

一個字符串變量那麼我該如何顯示div？ – leeshin

<body> 

    <div id="name">backtrack</div> 
<button onClick="popUp();">click here</button> 


</body>

和Java Script是

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 = document.getElementById("name").innerHTML; 
    popup.appendChild(message);          
    popup.appendChild(cancel); 
    document.body.appendChild(popup); 
    }

和小提琴http://jsfiddle.net/WGPhG/6/

來源

2013-08-19 10:58:41 Backtrack

謝謝。這個釘了它。儘管如此，我只好搗鼓它。 – leeshin

我已經更新了答案，請親切看看它 – Backtrack

你的代碼沒有做任何事情，以顯示DIV

看到http://jqueryui.com/dialog/

documentation

顯示DIV可以使用

更換您的變量win，而不是window

$('body').append(win);

來源

2013-08-19 10:57:19

總結了需要顯示爲一個彈出窗口的HTML內容。

<div id="popup"> 
<!-- Your content here as pop up --> 
</div>

然後用JQuery dialog

$(function() { 
    $("#popup").dialog({ 
     autoOpen: false, 
     show: { 
     effect: "blind", 
     duration: 1000 
     }, 
     hide: { 
     effect: "explode", 
     duration: 1000 
     } 
    }); 

    $("#button").click(function() { 
     $("#popup").dialog("open"); 
    }); 
    });

來源

2013-08-19 11:03:39

如何在JavaScript函數內顯示div元素？

回答

相關問題