2013-08-19 5 views
-3

Цель - когда я нажимаю кнопку, вызывается функция javascript. Внутри функции javascript находятся теги/элементы div, и я хочу показать их как всплывающие окна.Как показать элементы div внутри функции javascript?

JavaScript:

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

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

Когда я нажимаю кнопку, я знаю, что функция была вызвана, но окно/окно не появляется на моем HTML-страницы. Помогите!

+0

посмотреть на [диалог] JQuery UI (в http://jqueryui.com/dialog/) виджет –

+1

Ваш код не делает ничего другого, кроме создания переменной строки с именем окна – Itay

+0

то что я делаю, чтобы показать div? – leeshin

ответ

1
<body> 

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


</body> 

и ява скрипт

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/

+0

спасибо. это прибило его. Я просто должен с этим поиграть. – leeshin

+0

Я обновил ответ, любезно просмотрю его – Backtrack

0

ваш код не делает ничего, чтобы показать Див

см http://jqueryui.com/dialog/

documentation

показать DIV можно использовать

заменить переменную win вместо window

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

Оберните 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"); 
    }); 
    });