javascript popup from scratch no libraries

Я пытаюсь реализовать всплывающее окно lightbox/modal box в javascript без использования jquery, scriptaculous, прототипа или любой библиотеки вообще. я нашел очень хороший старт прямо здесь, на StackOverflow:javascript popup from scratch no libraries

How to code a JavaScript modal popup (to replace Ajax)? (нет смысла повторять код здесь)

Я попытался сделать простые изменения и все работало нормально, я даже добавил контент HTML и он работал, но я застрял в добавлении полос прокрутки, я сделал свое исследование и ничего не нашел, поскольку почти каждый ответ, который вы получаете на google, основан на jquery (даже все остальные ответы на вопрос, который я упоминал выше, включают jquery!) Любые предложения или ссылки будут отлично,

спасибо

источник

2013-11-17 Jack

Переполнение CSS: http://css-tricks.com/the-css-overflow-property/ –

http://amolnpujari.wordpress.com/2013/12/19/a-quick-javascript-lightbox/ –

Я думаю, что эта статья под названием «CSS OVERLAY TECHNIQUES» поможет вам. http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

Он предоставляет несколько способов выполнения вышеуказанной задачи без jquery.

Например, один из способов, описанных с помощью этой ссылки является:

МЕТОДИКА # 1: АБСОЛЮТНО позиционированный элемент

Первый способ, что наложение может быть создано является абсолютно позиционирования HTML-элемент на странице. В разметке будет пустой div , а с CSS этот div будет помещен абсолютно и , учитывая высокое значение z-index, чтобы убедиться, что он остается поверх всех остальных элементов на странице, кроме модального, который открывается поверх этого наложения, которые получат еще более высокий z-индекс, чем наложение.
<html> 
    <body> 
    <div class="overlay"></div> 
     
    <body> 
<html> 
Предположу, мы уже добавили пустую DIV разметки и дали это класс .overlay, то CSS позиционировать эту накладку на странице:
html, body{ 
    min-height: 100%; 
} 
body{ 
    position: relative; 
} 
.overlay{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 10; 
    background-color: rgba(0,0,0,0.5); /*dim the background*/ 
}

источник

2013-11-17 15:46:55

Ссылка на потенциальное решение всегда приветствуется, но, пожалуйста, добавьте контекст вокруг ссылки, чтобы у ваших коллег было некоторое представление о том, что это такое и почему оно есть. Всегда указывайте наиболее значимую часть важной ссылки, если целевой сайт недоступен или постоянно находится в автономном режиме. – IvanH

Спасибо @IvanH. Отмечу, что на будущее. –

Вы также можете отредактировать этот ответ. В противном случае он, вероятно, будет удален. – IvanH

Если вы хотите модальный диалог для реального, используйте window.showModalDialog:

returnVal = window.showModalDialog(uri[, arguments][, options]);

где

returnVal представляет собой вариант, указывающий returnValue свойство, как установлено окно документа, указанного uri.
uri URI документа для отображения в диалоговом окне.
arguments - необязательный вариант, который содержит значения, которые должны быть переданы в диалоговое окно; они доступны в объекте window объекта window.dialogArguments.
options необязательная строка, определяющая орнамент окна для диалогового окна.

Обратите внимание, что реальных модальных останавливает выполнение JavaScript (как alert, confirm и prompt делают), в отличии от поддельных модальных диалогов, созданных с помощью библиотеки как JQuery.

источник

2013-11-17 15:55:58 Oriol

'showModalDialog', кажется, устарел в Firefox и« будет удален »в Chrome. – antinome

javascript popup from scratch no libraries

ответ

Смежные вопросы