Всплывающее текстовое поле

Question

Я хотел бы знать, что такое имя элемента, когда вы создаете окно, которое появляется и накладывается поверх главной страницы.

Примерами являются: Фотографии Facebook - он отображает веб-страницу фона и открывает отдельное всплывающее окно для просмотра изображений.

Рекламные объявления - Коробка, в которой вы (часто) должны нажать «x», чтобы выйти.

В принципе, вы находитесь на одной странице, но это отображается посередине, поверх главной страницы важной информации или нет.

Я хотел бы создать его, чтобы объяснить, что веб-страница должна быть о чем-то вроде ориентации или когда человек просит ее; например, нажав [узнать больше].

Answer 1

Ниже приведен простой способ создания всплывающего окна. Обратите внимание, что некоторые из них могут быть проще сделать с библиотекой, например, с библиотекой пользовательского интерфейса jQuery или jQuery, что позволяет легко сделать диалоговое окно. Существуют и другие библиотеки, такие как лайтбокс и т. Д. Но ниже используется чистый javascript.

Также обратите внимание, что у меня есть комментарии в коде CSS, вам нужно будет удалить их, поскольку он сломает css в противном случае, я просто их там, чтобы вы знали, что делает каждая часть.

HTML

<button id="LearnMoreBtn">Learn More</button> 
<div id="overlay"></div> 
<div id="popup"> 
    Popup contents here 
</div> 

CSS

#overlay { 
    display:none; //This make it initially hidden 
    position:fixed; //This makes it so it says in a fixed position even if they scroll around 
    left:0px;  //This positions the element to the left most position 
    top:0px;   //This positions the elment to the top most position 
    width:100%;  //This makes the element take up 100% of the parents width 
    height:100%;  //This makes the element take up 100% of the parents height 
    background:#000; //Give it a black background 
    opacity:0.5;  //Change the opacity to 50% so that is see through. 
    z-index:99999; //Change the z-index so it will be above everything else 
} 

#popup { 
    display:none; 
    position:fixed; 
    left:50%;   //left and top here position top left page 
    top:50%;    //of the element to the center of the 
    width:300px;   //Set the popup to have a specific width/height 
    height:150px; 
    margin-top:-75px; //To get the popup to center correctly we need 
    margin-left:-150px; //To displace the the top/left margins by half of the width/height 
    background:#FFFFFF; //Background of white 
    border:2px solid #000; //And give it a border 
    z-index:100000;  //Set z-index to 1 more than that of the overlay so the popup is over the overlay 
} 

Javascript

//Use the onload event so that we can make sure the DOM is at 
//least mostly loaded before trying to get elements 
window.onload = function() { 
    //Get the DOM element that represents the <button> element. 
    //And set the onclick event 
    document.getElementById("LearnMoreBtn").onclick = function(){ 
     //Set a variable to contain the DOM element of the overly 
     var overlay = document.getElementById("overlay"); 
     //Set a variable to contain the DOM element of the popup 
     var popup = document.getElementById("popup"); 

     //Changing the display css style from none to block will make it visible 
     overlay.style.display = "block"; 
     //Same goes for the popup 
     popup.style.display = "block"; 
    }; 
}; 

Чтобы скрыть накладку и всплывающее окно снова просто установите .style.display назад none

overlay.style.display = "none"; 
popup.style.display = "none"; 

Обратите внимание, что использование этого конкретного кода приведет к резкому появлению наложения и всплывающего окна, без замирания или скольжения. Как я упоминал ранее, было бы проще делать подобные вещи с упомянутыми среди других библиотек.

Demo on JSFiddle

Answer 2

Общая функциональность, что вы ищете, называется модальным.

Вот демо-версию для управления jqueryui: http://jqueryui.com/dialog/#modal-message

Answer 3

Простой способ заключается в использовании title атрибут для любого элемента и почти во всех браузерах он показывает всплывающую подсказку для вас. Вот еще несколько примеров:

[http://www.w3schools.com/tags/att_global_title.asp][1]