Лучший способ добавить div по запросу

Question

Я хочу создать окно на моей странице, которое отображается по требованию: пользователь нажимает кнопку, отображается div.

качестве наглядного примера того, что я хочу достичь, в окне-клавиатуры ярлыки на jsfiddle (вниз левом углу): http://jsfiddle.net/

Теперь я не уверен, каким образом я должен сделать это:

• Создайте в DIV сразу и установить его на дисплей: нет, пока не требуется
• Написать скрипт, который добавить это ДИВ с помощью JS
• Написать скрипт, который загружает его из внешнего файла .html

Какой способ вы порекомендуете?

Update

Что делать, если я получил 15 различных коробок, которые не показаны при загрузке страницы, но они должны быть добавлены по запросу? Несомненно, это сработает, но можем ли мы назвать это «хорошей практикой», чтобы просто скрыть каждый элемент, который мы не хотим видеть?

Answer 1

Update: Вы недавно модифицировали вопрос, чтобы спросить о 15 или около элементов, которые не сразу нужны. В этом случае с таким количеством немедленных элементов я, вероятно, подумал бы о создании их на лету, когда они вам понадобятся, но всегда проверяя их существование до этого, чтобы вы в конечном итоге не воссоздавали их снова и снова.

---

Я бы просто загрузить элемент при загрузке страницы:

<div id="box"></div> 

стилизовать, имеющий то невидимое по умолчанию:

​#box { 
    position: fixed; 
    top: 10%; left: 10%; 
    width: 80%; height: 80%; 
    background: red; 
    display: none; 
}​ 

А потом провод-вверх логику, чтобы показать ее на каком-либо событии, возможно, нажатие пробела:

var $box = $("#box"); 

$(document).on({ 
    keydown: function (event) { 
     if (event.which === 32 && $box.is(":not(:visible)")) 
      $box.stop().fadeIn(); 
    }, 
    keyup: function (event) { 
     if (event.which === 32) 
      $box.stop().fadeOut(); 
    } 
}); 

И вуаля: http://jsfiddle.net/GfMsd/

Или вы могли бы основывать его на щелканье другого элемента, как jsFiddle сделал:

$(".toggle").on("click", function (event) { 
    $("#box").stop().fadeToggle(); 
});​ 

Демо: http://jsfiddle.net/GfMsd/1/

Answer 2

просто добавить DIV в HTML и установить свойство CSS display для none по умолчанию и использование JQuery исчезать его по щелчку следующим образом:

$('#some_button').click(function(){ 
    $('.hidden_box').fadeIn(); 
}); 

Рабочий пример

Попробуйте работать jsfiddle

Answer 3

Ответ без jQuery, только для того, чтобы убедиться, что родной JS недопредставлен ;-)

Создать div, содержащий все, что содержание вы хотите, и поместите его туда, куда вы хотите, чтобы это было в конце концов, и скрыть его:

<div id="hiddenDiv" style="display:none">Some content here</div> 

Затем добавить слушатель события на кнопку, чтобы переключить его видимость.

document.getElementById('showDivButton').addEventListener('click', toggleDiv); 
var div = document.getElementById('hiddenDiv'); 

function toggleDiv(){ 
    if(div.style.display == 'block') { 
     div.style.display = 'none'; 
    }else{ 
     div.style.display = 'block'; 
    } 
}