Вывод окна предупреждения в элементе DIV


Содержание

Dobrovoi Master

Создаем всплывающее окно при загрузке сайта с помощью CSS3 и немного javascript

Всем нам блуждающим по просторам глобальной сети попадались на глаза сайты, при загрузке которых сразу, или с задержкой в несколько секунд появлялось всплывающее окно с различным содержанием, будь то просто объявление, реклама какого-либо продукта, подписная форма или же форма обратной связи.
Можно по разному относиться к таким методам подачи информации. Меня например, все эти всплывающие окна выскакивающие во время посещения какого-нибудь сайта, мягко сказать напрягают, да что там, они меня просто бесят, хочется сразу уйти, покинуть этот сайт, что в большинстве случаев я и делаю. Да и все современные браузеры с подозрением относятся к разного рода всплывающим окнам на первоначальном этапе загрузки сайта, они их просто-напросто блокируют. Но, как мы видим, многие, очень многие веб-мастера реализуют именно такой, навязчивый способ подачи информации.

Меня больше заинтересовала техническая сторона вопроса и методы его решения. Придумывать особо ничего не пришлось, все давно придумано и прекрасно работает. Сегодня вместе с вами, мы разберем детально, как проще всего реализовать модальное окно всплывающее при загрузке сайта, используя в работе магию новых свойств CSS3 и совсем небольшого javascript, чтобы усыпить бдительность браузеров и иметь контроль над временем появления информационного блока.

Для начала, не отходя от кассы, на специально приготовленной демо-странице, вы можете посмотреть на конечный результат всего того что мы будем с вами делать. В примере, в всплывающем окне я использовал текст и парочку изображений, для наглядности. Вы же в последствии сможете вставить в модальное окно все что угодно, главное не переусердствуйте )))).

Разметка HTML

Разметка нашего всплывающего окошка чрезвычайно проста. Нам понадобятся всего лишь два блочных элемента div с идентификаторами id, для привязки к javascript и формирования внешнего вида с помощью стилей CSS. Элемент

Модальное Окно!

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

Предусмотрена возможность использования встроенных миниатюр, расположенных слева или справа, в отдельном div-контейнере с выделенным классом .pl-left и .pl-right соответственно.

Размер блока миниатюр так же определил в процентной записи (25%), тем самым обеспечив возможность пропорционального изменения, при просмотре на экранах различных пользовательских устройств.

Простейшая анимация появления с помощью изменения свойства прозрачности (opacity) от 0 к 1

Для того чтобы окно появлялось не сразу при загрузке сайта, а с задержкой в несколько секунд, мы используем небольшой javascript и уже с помощью его сможем регулировать время появления всплывающего окна. Все браузеры спокойно отнесутся к такому раскладу и не будут блокировать работу скрипта, а значит и само появление всплывающего окошка. Вставить этот javascript лучше всего в конце тела страницы html перед закрывающим тегом

Пять способов скрыть элемент с помощью CSS

Дата публикации: 2020-06-27

От автора: в CSS есть много различных способов сокрытия элементов. Можно установить opacity: 0, visibility: hidden, display: none или задать сверх большие значения при абсолютном позиционировании. Вы никогда не задумывались, зачем нужно столько много способов для одного и того же действия? Все методы почти не отличаются друг от друга, а существующие различия лишь указывают на то, какой из них и в каких обстоятельствах должен применяться. В этом уроке мы вам расскажем про мелкие отличия данных методов, на которые стоит обращать внимание.

Свойство opacity

С помощью свойства opacity задается прозрачность элемента. Данное свойство не изменяет границы элемента, т.е. если задать 0, то элемент будет скрыт только визуально. Элемент все так же будет занимать свое положение и пространство, влияя на расположение других элементов макета страницы. Кроме того, невидимый элемент будет отвечать на взаимодействие с ним.

Если вы хотите скрыть с помощью opacity элементы от скрин ридеров, то у вас это не получится. Элемент и весь его контент останутся видимыми для скрин ридеров, как и все остальные элементы на странице. То есть элемент ведет себя ровно так, как если бы он был видимым.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Также стоит отметить, что свойство поддается анимации, и с его помощью можно создавать поразительные эффекты. Элемент со свойством opacity меньшим 1задает новый контекст стека.

При наведении курсора на скрытый второй блок элемент плавно меняет свое состояние с полной прозрачности до полной непрозрачности. Блоку также задано свойство cursor: pointer, показывающее, что с ним можно взаимодействовать.

Свойство visibility

Следующее в нашем списке свойство visibility. Если установить значение hidden, то элемент будет скрыт. Как в случае со свойством opacity, скрытый с помощью данного свойства элемент не виден, но не стерт из макета страницы. Отличие от первого свойства в том, что данное свойство запрещает взаимодействовать со скрытым элементом. Также элемент будет скрыт от скрин ридеров.

Данное свойство также поддается анимации, можно менять первоначальное и конечное значения. Т.е. можно плавно анимировать свойство при помощи transition.

В демо ниже показана разница между visibility и opacity:

Обратите внимание на то, что дочерние элементы тега со свойством visibility: hidden могут быть видны, если им задать свойство visibility: visible. Проведите курсором внутри блока, но не доходя до цифры. Как видите, курсор не меняет свое значение на pointer. Также если кликнуть в этой области, то ничего не произойдет.

Свойство display

Свойство display прячет элементы по-настоящему. Если установить элементу свойство display: none, то он не просто будет скрыт, не будет создана даже его блоковая модель. Данное свойство полностью скрывает элемент, будто его и не было. Также в таком случае с элементом нельзя никак взаимодействовать. Скрин ридерам будет не доступен контент скрытого элемента. Т.е. элемент как будто и не существовал.

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


Элемент остается доступным через DOM. Вы все так же можете манипулировать им, как и любым другим элементом.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Откройте вкладку CSS в демо ниже:

В коде видно, что у второго блока есть параграф, которому задано свойство display: block, но он все равно остается невидимым. В этом и есть разница между visibility: hidden и display: none. В первом случае если дочерним элементам задать свойство visibility: visible, то они станут видимыми. Во втором случае такой подход не работает. Все дочерние элементы остаются скрытыми независимо от их собственных значений свойства display.

Наведите пару раз курсор на первый блок. Событие hover выполняется? Если кликнуть на него, второй блок станет видимым. Счетчик во втором блоке должен показывать цифру, отличную от нуля. Блок скрыт от пользователя, но все еще доступен для взаимодействия через JS.

Свойство position

Представьте, что вам нужно создать такой элемент, чтобы с ним можно было взаимодействовать, но в то же время чтобы он не влиял на макет страницы. Ни одно из рассмотренных до сих пор свойств полностью не справлялось с этой задачей. В таком случае можно выдвинуть элемент за пределы видимой области. Элемент не будет влиять на макет, но останется доступным для взаимодействия. CSS код:

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.
Андрей Параничев (блог) , 26 дек 2008 — 02:36
  • javascript

Измерения окна, документа и элементов

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

Разрешение экрана

Для определения ширины и высоты экрана пользователя используются свойства width и height объекта window.screen . Эти свойства доступны во всех браузерах.

Положение окна браузера

Мнения разработчиков в вопросе какое же свойство должно хранить положение окна относительно верхней левой точки экрана, видимо, разошлись.

В итоге мы получили две пары свойств: window.screenY , window.screenX и window.screenTop , window.screenLeft .

Первые два работают в браузерах Mozilla (например Firefox), вторая пара работает в Internet Explorer и Opera. В браузерах, основанных на движке WebKit (например Safari, Chrome), обе пары работают и их значения равны друг другу соответственно.

Но невозможно абсолютно кросс-браузерно определить положение окна, поскольку в разных браузерах отсчет идет до разных точек. Дело в том, что браузеры Internet Explorer и Opera в значениях screenTop и screenLeft хранят координаты левого верхнего угла документа, а не всего окна, поэтому даже при развертывании на весь экран их значения будут не нулевые.

Напротив, остальные браузеры начинают отсчет от верхней левой точки самого окна, как и ожидается для этих свойств. Стоит отметить, что в Firefox, при развертывании окна на весь экран, значения screenY и screenX могут быть отрицательными.

Странно, но в Opera значения screenY и screenX не undefined , однако я не могу понять, что они значат. При любых перемещениях окна эти значения не меняются и все время отрицательны. Если это не очередной глюк Opera, и я что-то упустил, отпишите, пожалуйста, в комментариях.

Положение окна браузера можно изменить двумя методами:

Размеры окна браузера

Под размерами окна браузера подразумеваются как размер всего окна целиком (вместе с хромом и панелями), так и размер видимой части документа (вьюпорт), или другими словами, размер окна браузера без панелей и хрома.

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

Для получения размеров окна браузера целиком во всех браузерах, кроме Internet Explorer, вы можете использовать свойства window.outerWidth и window.outerHeight . И, насколько я понимаю, аналогов для Internet Explorer не существует.


С размерами вьюпорта тоже существуют проблемы. Дело в том, что в зависимости от браузера и типа документа значения будут разные, в частности — не всегда ясно, будет ли размер скроллбара учитываться, или нет.

Во всех браузерах, кроме Internet Explorer, вы можете получить размер вьюпорта с помощью свойств window.innerWidth и window.innerHeight . Эти свойства всегда будут включать ширину, или высоту скроллбара, что в некоторых задачах неуместно.

Другим способом определения размеров вьюпорта могут служить свойства clientWidth и clientHeight объекта document.documentElement , или, другими словами, элемента html текущего документа.

Но это справедливо только для режима следования стандартам (CSS1Compat mode), поэтому приведенный выше код работает верно в этом документе.

Но если у страницы не будет указан doctype, то в некоторых браузерах свойства clientWidth и clientHeight объекта document.documentElement будут иметь значения ширины и высоты всего документа целиком, а не только видимой его части, в то время как document.body.clientWidth и document.body.clientHeight наоборот будут иметь значения размеров вьюпорта.

И учитывая то, что нет возможности узнать, что является размерами вьюпорта — свойства document.documentElement или document.body (поскольку они оба существуют, но смысл значений может быть разный), то получается, что кросс-браузерное определение размеров вьюпорта этим способом — невозможно, если документ отображается не в режиме следования стандартам.

Размеры окна браузера можно изменить двумя методами:

Скролл окна браузера

Сколлбар имеет несколько параметров: ширина, высота, значение прокрутки сверху, значение прокрутки слева.

Первые два параметра определяются свойствами scrollWidth и scrollHeight объекта document.documentElement . Это, опять же, справедливо только для режима следования стандартам.

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

Примечание на счет элементов я сделал не просто так: если какой-нибудь абсолютно позиционированный элемент будет «вылезать» за пределы body , то он «растянет» ширину/высоту скролла, но размеры document.body останутся прежними. Напротив, если размеры документа меньше, чем размеры вьюпорта — то значения scrollWidth и scrollHeight будут равны размерам документа, а не всего окна.

Стоит отметить, что как и в случае с размерами вьюпорта, в режиме «quirks mode» не всегда понятно, свойства какого элемента ( documentElement или body ) будут иметь нужные нам значения скролла.

Для того, чтобы убедится в том, что в разных браузерах эти свойства имеют разные значения, можете попробовать выполнить тесты, представленные по этой ссылке, в разных браузерах: http://www.quirksmode.org/viewport/experiments/body.html

Для того, чтобы определить на сколько пикселей прокручен документ, нужно обратиться к свойствам scrollTop и scrollLeft объекта document.documentElement , если браузер в режиме следования стандартам, или document.body , если браузер в режиме «quirks mode».

В браузерах на движке Mozilla (Firefox) или WebKit (chrome, safari) вы можете воспользоваться свойствами window.scrollY и window.scrollX для определения этих значений. Они будут равны scrollTop и scrollLeft соответственно.

Из скрипта вы можете управлять прокруткой страницы, пользуясь следующими методами (обратите внимание на очередность параметров):

Размеры документа и элементов

Одна из самых часто встречаемых задач — определение размера элемента.

Дело в том, что не всегда достаточно узнать какие значения размеров были установлены через стили элемента и особенно это касается «резиновых» элементов (которые растягиваются в зависимости от размеров их содержания), или элементов с фиксированными размерами, но имеющих внутренние отступы.

Во всех браузерах, независимо от режима, вы можете получить размер элемента с помощью свойств offsetWidth и offsetHeight .

Для демонстрации, небольшой пример:

Точно так же можно определить размер всего документа, точнее размеры элемента body :

Положение элемента на странице

Одна из самых распространенных задач — определение абсолютной позиции элемента относительно левого верхнего угла документа.

Для определения позиции используются следующие свойства элемента:
offsetTop — отступ сверху, измеряется в пикселах относительно родительского элемента.

offsetLeft — отступ слева, измеряется в пикселах относительно родительского элемента.

offsetParent — ближайший родитель, относительно которого делается отсчет. Его значение будет null если текущий элемент невидим ( display: none ) или это корневой элемент документа.

Поскольку значение считается от ближайшего родителя, то абсолютная позиция относительно верхнего левого угла документа обычно считается в цикле, который завершается тогда, когда значение offsetParent будет равно null .

Обычно, функция по определению абсолютной позиции выглядит следующим образом:


Таким способом можно считать позицию как статичных элементов ( position: static ), так и элементов с абсолютной позицией ( position: absolute ).

Заключение

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

Ожидал увидеть еще способ кросс-браузерного получения координат мыши

Взяв реализацию из jQuery и немного переделав её, получил:

Сам не разбирался еще, что происходит в этом большом выражении, возможно получится упростить

Много полезного, как раз то, что искал. Совсем не то, что ковыряться в Prototype, jQuery или Dojo. Спасибо!

Должен отметить, что функция получения координат элемента относительно верхнего левого угла документа даст неверный результат в IE6, если в цепочке offsetParent попадется элемент с position: relative.

Афтор зачод! Наитолковые статьи в рунете по ЯС! Сразу видно берется за дело с головой. Пишы исчо! Где я только не рылся за этим материалом а оно вот он чо! всё тут и на блюдечге!!
// З.Ы. Илья — ф основную книгу эту статью ИМХО этот каждому пригодится, а в этих блогах фиг нашол, ещё повезло что наткнулся =)

автор пишы исчо это точно:) спс за размеры окна браузера

На основе некоторых идей этой статьи создан основной материал сайта.

Спасибо за статью, Андрей!

Андрей Параничев, а что можешь сказать по поводу следующего способа определения разеров вьюпорта — http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

Спасибо, всегда путаю, что x (икс) это «left» в переносе на слова.

Классная статья, спасибо!

Но подскажите, как эти полезные свойства применить собственно к элементам страницы: к примеру чтоб таблица, структурирующая GUI, масштабировалась относительно размеров видимой обл-ти? К ее атрибутам не применимы свойства :

Как узнать ширину и высоту элемента div до его отображения, это реально? Заранее спасибо

Для элемента div
«Элемент с не фиксированной шириной и высотой.
Кликните для появления сообщения.»:
this.offsetW > this.offsetW > this.offsetW > this.offsetW > Высота offsetHeight во всех браузерах посчиталась одинаково.

Для body везде получились различные значения высоты.

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

А что вы думаете по поводу такого кроссбраузерного определения размера вьюпорта:

в IE7 не сработал, выдал 0

Я понял. Для IE надо math.max получать. Спасибо

Работает корректно во всех браузерах!
Определяет размер рабочей области окна!
+ размер области документа (с учетом дивов с абсолютным позициониррованием)
+ работает и в ИЕ6 и в Сафари

Ой, чуть не забыл пояснить.
функция возвращает:
ww — window width
wh — window height
dw — document width
dh — document height
wsl — window scroll left
wst — window scroll top

Снова я, уж простите, доработанная функция:

Норм, хотя когда футер прижат надо под ie8 как минимум перерасчитывать все.

С этой функцией наткнулся на некоторые проблемы, все описать довольно сложно, лучше выложу исправленный код. Буду признателен если кто нибудь найдет баги и отпишет mail@atlas-is.ru. Я тестировал на:
ИЕ6 ИЕ7 опреа9/10 Мазилла 3,6 Safari(win32) Chrome
для всех браузеров было 4 разных ситуации с разными доктайпами и т.д. в моем случае сейчас функция работает безупречно для: определения видимой области окна браузера (с корректным учетом скроллбаров). определения области документа/страницы с учетом всех элементов на странице (даже при абсолютном позиционировании). и смещение скролла.

Надеюсь кому то помог! Потому как сам перерыл огромную кучу информации пока соорудил это.

Спасибо, но для тех, кто не подключал jQuery эту часть кода


надо заменить на

Спасибо. Долго искал эту информацию и нашел.

А я уже давно забил на попытки сооружать мегауниверсальные функции. Я следую таким правилам:
— верстаю в xhtml со следующим шаблоном пустого дока:

— если страница верстается php, то конечно же в нем шлется заголовок

— если что-то пошло не так, значит накосячил в html-коде и он уже в квирк-моде, открываю в Опере, жму «Соблюдены ли web-стандарты» и добиваюсь успешной проверки на W3C-валидаторе. По-ходу, практически не встречаю в инете страниц, проходящих валидацию. Эта страничка например тоже не проходит — куча досадных ошибок типа не указан тип скрипта, блок стилей вставлен там где нельзя, спаны закрываются, но не открывались перед этим, id дублирующиеся и т.д. Очень распространен подход, когда в js пишут что-то типа

(На этой странице такое есть) Ну а слеш в закрывающем теге кто экранировать будет!? Зачем делить слово SCRIPT на две части, если тут же ошибка потяжелее?

проходит валидацию, ессесно работает и ничего не нужно делить. Нужно просто не забыть указать тип скрипта, вставить в нем коменты-ограничители для XML-парсера и экранировать символы / и ‘ в строках.

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

Итак, начинать следует со стандартизации своих проектов и исправления в них ошибок перед каждым релизом (мы ж не роботы, конечно забываем временами и коменты вставлять и вместо на скорую руку пишем) — отправка страницы прямо из браузера на W3C всегда под рукой.

Ну а когда валидация пройдена, то и гемороя меньше. Конечно если речь не идет о совсем старых браузерах, на которые я могу забить. Кто не может, тому мои искренние сожаления и моральная поддержка в тяжбах.

А так, провел небольшой тест на Опера 10.60 (пачка пердыдущих версий скорей всего то же выдаст), IE8 и FF 3.6.6. Создал корректную страницу с длинной таблицей на 100 строк, каждая строка имеет паддинг, прописанный в CSS, что в IE и в Фоксе приводит к увеличению высоты html (т.е. html становится длиннее body), аналогично и при div-верстке, т.е. лично таблицы тут ни при чем. Такая же фича наблюдается и в Опере ИНОГДА. Возможно в квирке — не проследил. В тестовом примере в Опере html не удлинился и не испортил страницу лишним белым куском на 700+ точек.

Результаты таковы (html — это document.documentElement):

1. Виевпорт во всех трех записан и в body, и в html корректно и с вычетом скролбара.

2. Во всех браузерах body.scrollTop равен 0 не зависимо от того, где мы находимся — вверху или внизу. В принципе, логично, у нас же html скролится, а не body.

2. Во всех браузерах offsetWidth и offsetHeight что у body, что у html равны размеру виевпорта.

3. Исходя из вышесказанного и увиденного полная высота именно body записана только в IE, в котором мы можем видеть, что body — 2471 px, а html — 3178 px; в Опере мы можем понадеяться, что лишней простыни после body не добавлено и следовательно его высота равна высоте html, а вот в Фоксе мы понятия не имеем, что body короче html и вообще короче ли или одинаковы.

Если нужно знать высоту именно body, то в ряде случаев можно попробовать запретить скрол html-у и выдать скролл body. Но в ряде случаев такой финт ушами не получится (если получится вообще, т.к. не пробовал еще). Например если у нас дизайн на 100% высоты видимого окна, тогда чтобы размер документа был на всю видимую высоту даже если контент коротковат для этого, нам придется в css выставить высоту 100% для html, body и контейнера, который содержит контент и например футер или бекграунд внизу. А в таком случае когда контента будет больше чем на высоту виевпорта указанные нами 100% для html будут делать его всегда не меньше чем body в нем,который тоже не меньше чем контент в нем. Т.е. фишка с коротким html и скролящимся в нем body — не возможна.

Вот так. Придется обходится высотой html или решать, как обойти проблему его удлинения.

Стоит отметить, что в IE8 (может и других версий) screen.width и window.screen.width возвращают не реальное разрешение экрана, а виртуальное (т.е. при изменении масштаба отображения меняется и разрешение, возвращаемое функциями, например, при помощи Ctrl+колесо мыши).

Доходчиво про ClientX/Y и почему Опера их нормально обрабатывает.

Говорю Спасибо за сайт.
Мне очень помог.

Спасибо за статью! Но нигде не могу найти, как можно (и можно ли вообще) определить расстояние нижней границы элемента до нижней границы окна браузера. Может, кто-нибудь подскажет. Заранее спасибо!

Всем привет, Великолепная фраза

Интересно конечно, но есть много вопросов по теме ИМХО. Давайте обсудим (мыло в подписи) или тут, если не затруднит

«Буду раЗ услышать замечания . «

помог scrollHeight снять с дива высоту динамически

Окно предупреждения +18 JavaScript

Подскажите как сделать Окно предупреждения +18

Создал файл warning18_russian.js

Дальше прописал в путь


Все сохранил, очистил кеш браузера, но скрипт не сработал.

Уважаемые подскажите кто в этом разбирается где моя ошибка почему Окно предупреждения +18 не появилось.

С уважением Алексей!
Заранее благодарен!

Javascript
04.10.2011, 13:08

Окно предупреждения +18
Добрый день! сделал окно предупреждения +18 все работает хорошо только есть одна проблемка.

Окно предупреждения
Подскажите как сделать следующее: Как сделать чтобы по нажатию на некую ссылку не осуществлялся.

Окно предупреждения перед удалением
Здравствуйте. Подскажите, как при нажатии на картинку с изображением крестика (см. код).

Как закрыть окно IE чтобы предупреждения о закрытии не выскакивало?
Закрываю единственное окно эксплорера после нажатия кнопки методом close(). При этом выскакивает.

JavaScript и пустое окно
Должно появляться то что на картинке, но ничего не выходит просто пустой экран. В чём проблема.

04.10.2011, 13:11 2
04.10.2011, 13:22 [ТС] 3

Спасибо за быстрый ответ.
Я вам благодарен!

Скажите что именно я должен прописать в style.css
Я примерно понимаю о чем вы говорите, чтоб само окно появилось нужно добавить в style.css
Но что прописать в толк не возьму, подскажите пожалуйста!

04.10.2011, 13:28 4
Javascript
04.10.2011, 13:28
04.10.2011, 13:35 [ТС] 5

Вот мой файл style.css

Куда нужно вставить

var wrap = document.getElementByTagName(‘body’);
div.insertAfter(wrap);
>

Я пробовал вставить в самый низ не сработало.

04.10.2011, 13:39 6
Javascript
Javascript
04.10.2011, 14:36 [ТС] 7

var wrap = document.getElementByTagName(‘body’);
div.insertAfter(wrap);

Вы говорили что нужно стили прописать
Что именно я должен прописать в style.css

Добавлено через 48 минут
Народ кто разбирается подскажите как установить скрипт чтоб появилось
Окно предупреждения +18

04.10.2011, 14:49 8

Javascript
04.10.2011, 15:24 [ТС] 9

Прости но я совсем запутался.

Я сделал тест все получилось увидел окно с предупреждением.
Но как мне сделать его на сайте не знаю.
элемент с посмотрел у меня его нету.

1. Вот сам скрипт warning18_russian.js

2. Прописать в путь

Все что дальше делать ума не приложу, я не разбираюсь. Помоги мне (я понимаю что ты мне говоришь) но как сделать не знаю.

04.10.2011, 15:28 10
04.10.2011, 15:33 [ТС] 11

Вот это чистый код моей главной страницы
покажи на примере мне будет понятно
только скажи что еще мне нужно будет изменить

04.10.2011, 17:02 [ТС] 12

Вот сам шаблон сайта
с images, scripts, styles и html-страничками

Жду вашего ответа.

Вложения

internet-business.zip (57.9 Кб, 25 просмотров)
04.10.2011, 20:37 13
Javascript
Javascript
Javascript
Javascript
10.10.2011, 12:26 [ТС] 14

Ни фига не получается сделать чтоб скрипт заработал.
Все попробовал и на других форумах писал не каких результатов.
Уважаемый djdish большая просьба посмотрите шаблон там чистый код.
Я не чего не трогал и не прописывал, на примере шаблона, давайте разберемся где и что прописать.
Вы явно понимаете и разбираетесь, установите скрипт в шаблон.

Заранее благодарен.
С уважением Алексей!

10.10.2011, 14:16 15
10.10.2011, 18:05 [ТС] 16

Да я шаблон скидывал
обычный шаблон сайта, чистый код в нем папки
с images, scripts, styles и html-страничками.

Я там не чего не прописывал. Скрипт с окном предупреждения находится на сайте

10.10.2011, 20:56 17
Вложения
index.rar (4.0 Кб, 109 просмотров)
11.10.2011, 06:16 [ТС] 18

Да скрипт работает и выводит окно.
Но каждый раз выводит, перезагружаешь страницу и окно предупреждения +18 опять видно.

Этого не должно быть, окно должно появится только один раз правильно, чтоб предупредить, а не каждый раз гуляя по сайту. Вот сами посмотрите на сайте <ссылка удалена>если нажать продолжить, то окно больше не появится, пока не очистить кеш браузера. Я Вам благодарен что помогаете, давайте доделаем до конца этот скрипт.


Действие при появлении элемента на экране — jQuery

С каждым днем сайты становятся все сложнее, а дизайнеры придумывают все новые способы привлечь внимание посетителей — и это правильно, ведь удивить становится все труднее. Именно поэтому в последнее время на многих сайтах присутствует анимация и различные эффекты. Но нас сегодня интересует немного другая тема: как определить, виден ли сейчас элемент на экране или нет? И если виден, то сделать какое-нибудь действие. Например перекрасить его в другой цвет. Сайт может быть длинным и если вы назначите анимацию при загрузке страницы, вероятность того, что пользователь ее увидит — очень мала — нужно запускать ее в тот момент, когда элемент появился на странице. Давайте научимся это делать.

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

Одна обертка и один блок. Добавим немного стилей:

Как видите, мы задали высоту обертке и поставили блок по центру — при загрузке страницы его не видно. И заранее описали класс green при котором заливка блока станет зеленой.

Давайте попробуем перекрасить блок, как только он целиком попадет в область видимости экрана.

Для этого напишем следующий скрипт:

Я немного забежал вперед и предусмотрел наличие на странице сразу множества элементов, поэтому использовал each. Что делает скрипт: при скролле страницы он пробегает все элементы и проверяет, что расстояние до них + их высота меньше расстояния, которое пользователь пролистал + высота окна. Как только условие нарушается, срабатывает скрипт — в нашем случае он добавляет класс green.

Если вам нужно многократное повторение действия (отмена действия если элемент скроется и повтор — если опять появится), достаточно просто дописать условие else.

Если блок по высоте больше высоты экрана

Если блок очень высокий, то он целиком не поместится в экран, а значит что скрипт выполнится поздно. Для такого случая давайте немного модифицируем скрипт. Будем выполнять действие, когда до верха страницы будет оставаться 100px.

Немного обновим стили:

И теперь сам модифицированный скрипт:

В скрипте мы выполняем проверку — если элемент больше чем высота экрана, то скрипт сработает, когда до верха останется 100px, в противном случае сработает по «старой» схеме.

Действие по центру экрана

А что если действовать нужно в тот момент, когда элемент находится ровно по центру экрана? И для такого случая найдется свой скрипт:

Делаем на CSS модальное окно за 3 шага

Здравствуйте, дорогие друзья и коллеги!

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

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

Выглядеть такое модальное окно будет вот так:

Посмотреть пример работы и скачать исходники можно по ссылкам ниже.

Прелесть этого способа заключается в том что он подойдёт абсолютно для любого сайта, не зависимо от того работает ли он на какой то CMS или вообще без неё.

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

Шаг 1. Создаём разметку для модального окна

Данный фрагмент кода вы можете вывести в любом месте страницы, так как эти блоки всё равно будут позиционироваться поверх всех остальных.

Желательно вставить его в начале или в конце страницы.

Как создать простое модальное окно на CSS

Статья, в которой рассмотрим, как сделать адаптивное модальное окно на чистом CSS.


Модальные (всплывающие) окна – это очень популярный элемент интерфейса современных сайтов. Оно может использоваться для вывода различного контента веб-страниц такого, например, как формы (обратной связи, регистрации, авторизации), блоки рекламной информации, изображения, уведомления и др.

В большинстве случаев модальное окно создают на JavaScript. Но его можно создать не только с помощью JavaScript, но и посредством только HTML5 и CSS3.

Демо модального окна

Демонстрацию всплывающего окна, работающего только на HTML5 и CSS3, вы можете посмотреть здесь:

HTML и CSS код модального окна

HTML разметка модального окна:

Ссылка, с помощью которой осуществляется открытие модального окна:

CSS модального окна:

Модальное окно на чистом CSS

Если вам необходимо убрать скролл страницы после отображения модального окна, то к элементу body нужно добавить CSS-свойство overflow со значением hidden . А после скрытия модального окна данное свойство убрать у элемента body . Данное действие можно осуществить только с помощью JavaScript:

Модальные окна на CSS

В наше время для различных сайтов нормой стали всевозможные всплывающие модальные окна — popup’ы — для регистрации, авторизации, информационные окна, — всевозможных форм и размеров. Также существует огромное количество плагинов к тому же jQuery для простого и удобного создания таких попапов — тот же Shadowbox, например.

Внешний вид, размеры и оформление таких попапов совершенно разнообразными — с оверлеем, тенюшками, анимациями — всего не счесть. Объединяет их только, пожалуй, тот факт, что обычно они выводятся в самом центре страницы — как по горизонтали, так и по вертикали. И центрирование это производится средствами JS. Я не буду вдаваться в подробности этих расчетов, опишу их лишь вкратце:

HTML-код попапа обычно имеет такую структуру:

— Попап вместе с содержимым

И CSS (здесь и ниже я умышленно буду опускать написание некоторых свойств, необходимых лишь для некоторых браузеров и их версий, оставив лишь самое основное):

.popup__overlay <
position : fixed ;
left : 0 ;
top : 0 ;
background : #000 ;
opacity : . 5 ;
filter : alpha( opacity=50 );
z-index : 999
>
.popup <
position : absolute ;
width : 20% ;
z-index : 1000 ;
border : 1px solid #ccc ;
background : #fff
>

JS определяет браузер и версию браузера, и на основании этого высчитывает размеры рабочей области и размеры самого попапа (если они не заданы), а затем производятся нехитрые вычисления положения его левого верхнего угла (css-свойства left и top для .popup). Многие плагины также реагируют на изменение размеров страницы, пересчитывая всё это дело каждый раз, с тем, чтобы попап располагался точно в центре рабочей области.

Я по натуре своей перфекционист (знаю, порой это плохо), и частенько заморачиваюсь даже над мелкими деталями, пытаясь улучшить и добавить максимально возможную расширяемость этим деталям, и меня не мог не зацепить именно этот момент в работе всех этих плагинов. Возникла мысль, что всю работу по позиционированию попапа можно переложить с плеч JS на плечи самого браузера, то есть выполнять эту работу средствами CSS.

Этим и займёмся.

Ниже я приведу пример попапа, работающего во всех мажорных версиях основных браузеров. Для корректной его работы в IE div class =»popup__overlay»>
div class =»popup»> div >
div >

.popup__overlay <
position : fixed ;
left : 0 ;
top : 0 ;
width : 100% ;
height : 100% ;
z-index : 999
>
.popup <
>

Фиксированные размеры

Самый простой вариант. Ничего нового изобретать не нужно:

.popup <
left : 50% ;
top : 50% ;
width : 400px ;
height : 200px ;
margin-left : -200px ;
margin-top : -100px
>

Отрицательные margin’ы в половину ширины и высоты — банально и скучно, ничего оригинального в этом нет. Идём дальше.

Размеры попапа зависят от содержимого

Сперва — выравнивание по горизонтали — это вроде бы проще. Если попап фиксированной ширины — то достаточно будет следующего:

На вертикальное выравнивание это никак не повлияет, и, к слову, если вам достаточно лишь горизонтального выравнивания, то на этом можно и остановиться, указав еще какой-нибудь верхний отступ попапа. Но нам этого мало! Идём дальше.

Вертикальное выравнивание. Здесь уже становится интересно. С такой задачей, конечно, без проблем справилась бы таблица или эмуляция таблицы с помощью display: table & display: table-cell, но заставить такое работать в старых IE — себе дороже. Таблица также отпадает — по понятным причинам.


Итак, margin уже отпадает — размеров мы не знаем. Вспоминаем, что же есть из свойств с подобными эффектами. Ага, text-align. Но только для инлайновых элементов. ОК. Кажется, сам Бог велел использовать display: inline-block — блочный элемент, к которому можно было бы применить свойства для инлайновых элементов. С поддержкой этого свойства у всех браузеров тоже всё, можно сказать, в порядке. Код становится примерно таким:

.popup__overlay <
position : fixed ;
left : 0 ;
top : 0 ;
width : 100% ;
height : 100% ;
z-index : 999 ;
text-align : center
>
.popup <
display : inline — block ;
vertical-align : middle
>

Остаётся вертикальное выравнивание — нам подойдёт vertical-align. В любой другой ситуации было бы также уместно использовать line-height, но поскольку у нас нет фиксированной высоты страницы (line-height в данном контексте), здесь использовать её нельзя. На помощь приходит один трюк с вертикальным выравниванием элементов неизвестных размеров. Я точно помню, что нашел этот способ на Хабре, но, к сожалению, не смог найти ссылку на тот топик. Заключается этот способ в следующем: добавляется inline-block элемент нулевой ширины и 100%-ой высоты родителя, который «расхлопывает» высоту строки до 100% высоты родителя, то есть до высоты рабочей области страницы. Сделаем это изящнее — вместо лишней разметки воспользуемся псевдоэлементами:

.popup__overlay :after <
display : inline — block ;
width : 0 ;
height : 100% ;
vertical-align : middle ;
content : »
>

Осталось добавить полупрозрачное затемнение оверлея — с этим справится rgba. Всё! Теперь положение попапа регулируется только средствами браузера на уровне CSS.

Из замеченных минусов метода — порой возникают глюки с отображением в IE 6-7, в частности, при использовании флоатов.

Повторюсь — мой метод не избавляет от использования JS вообще, он лишь частично оптимизирует скорость работы всплывающих окон за счет переноса части нагрузки с JS на CSS.

Уверен, что метод можно улучшить — как визуально, так и изнутри, и буду рад любым идеям и предложениям по этому поводу, а также замечаниям по работе и отображению в различных браузерах.

Системные диалоговые окна JavaScript

В этом уроке мы разберемся, как выводить диалоговые окна, позволяющие выводить короткие сообщения. Если вы пишете программу на JavaScript, то можете воспользоваться тремя стандартными методами для ввода и вывода данных: alert(), prompt() и confirm(). Каждое из этих диалоговых окон является синхронным и модальным, то есть выполнение кода приостанавливается на время показа такого окна и возобновляется после его закрытия.

Метод alert()

Метод alert() позволяет выводить диалоговое окно с заданным сообщением и кнопкой OK . Синтаксис соответствующего выражения имеет следующий вид:

Диалоговые окна оповещений обычно применяют, если нужно уведомить пользователя о чем-то, что он не контролирует, например об ошибке. В простейшем случае текст предупреждения, заключенный в двойные или одинарные кавычки, вводится внутри круглых скобок. Диалоговое окно, выведенное на экран методом alert() , можно убрать, щелкнув на кнопке OK . До тех пор пока вы не сделаете этого, переход к ранее открытым окнам невозможен. Методу alert() передается только одна строка — отображаемая. Чтобы отобразить многострочное сообщение, разделяйте строки символом \n :

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

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

На заметку: JavaScript-программисты часто вставляют вызов метода alert() в программный код с целью диагностики возникающих проблем.

Метод confirm()

Метод confirm() позволяет вывести диалоговое окно с сообщением и двумя кнопками — OK и Cancel (Отмена), благодаря чему пользователь может подтвердить или отменить некоторое действие. В отличие от метода alert() этот метод возвращает логическую величину, значение которой зависит от того, на какой из двух кнопок щелкнул пользователь. Чтобы можно было определить, какую кнопку выбрал пользователь, метод confirm() возвращает true, если был щелчок на кнопке OK , и false, если он щелкнул на кнопке Cancel (Отмена) или закрыл диалоговое окно щелчком на системной кнопке закрытия окна — X .

Синтаксис применения метода confirm() имеет следующий вид:

result — это логическое значение (true или false), указывающее, было ли выбрано OK или Cancel (Отмена).

В следующем примере метод confirm() выводит сообщение и ожидает, пока пользователь подтвердит или отменит некоторую операцию, щелкнув на одной из кнопок. Типичный код вызова этого диалогового окна выглядит так:

В этом примере оператор if («если») получает условие (confirm(«Вы уверены?»)). Он вычисляет его, и если результат – true (пользователь щелкает на кнопке OK ), то выполняет команду и выводит сообщение: «Я очень рад, что Вы уверены!».
Блок else («иначе») выполняется если пользователь выбирает кнопку Cancel . При этом выводится оповещение: «Жаль, что Вы не уверены. «.
Этот шаблонный код часто используется, когда пользователь пытается что-либо удалить либо пкинуть веб-страницу.

Метод prompt()

Метод prompt() выводит на экран диалоговое окно, которое запрашивает у пользователя информацию. Вместе с кнопками OK и Cancel (Отмена) оно содержит текстовое поле для ввода данных. В отличие отметодов alert() и confirm() данный метод принимает два параметра: сообщение и значение, которое должно появиться в текстовом поле ввода данных по умолчанию.

Синтаксис применения метода prompt имеет следующий вид:

  • result — строка, содержащая текст, введенный пользователем, или значение null .
  • сообщение — строка текста для отображения пользователю (обычно это вопрос). Этот параметр является необязательным и может быть опущен, если в окне подсказки ничего не отображается.
  • значение по умолчанию — строка, которая отображается по умолчанию в поле ввода, обычно второй аргумент оставляют пустым и записывают так — «».

Если пользователь щелкает на кнопке OK , метод prompt() возвращает значение, введенное в текстовом поле, а если выбирается кнопка Cancel (Отмена) или окно закрывается иным образом, то возвращается null . Вот пример:

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

В одной из моих функций сайта я применил MathJax API к строке текста. Теперь я пытаюсь преобразовать эту строку, используя API-интерфейс text-to-voice meSpeak.js . У меня возникла проблема с некоторым текстом после того, как API MathJax преобразует его, и я пытаюсь увидеть ВСЕ теги text и html, которые идут со строкой (transformText) после преобразования MathJax. Когда я пытаюсь взять преобразованную строку, а затем использовать innerHTML, все, что я вижу, это вывод HTML (без тегов, элементов стиля и т.д.),

Когда я пытаюсь передать преобразованную MathJax строку в окно модального предупреждения, которое я создал, я вижу только вывод HTML (так как мой модальный флажок Alert — действительно только причудливый div с высоким z-индексом). Только оповещение по умолчанию() показывает мне все текст/теги/стиль. Однако для строк, преобразованных в MathJax, существует так много меток и стилей, что окно предупреждения по умолчанию переполняется за пределы экрана:

Как вы, наверное, уже знаете, вы не можете щелкнуть правой кнопкой мыши или щелкнуть левой кнопкой мыши или скопировать содержимое для внутреннего окна предупреждения (если только это не только я). Есть ли способ переустановки окна предупреждения по умолчанию, включить переполнение-y: прокрутить в окне предупреждения по умолчанию или каким-либо иным образом увидеть (или скопировать) ВСЕ из преобразованного текста или тегов/стилей MathJax для строки transformText? Спасибо за любую помощь

Илон Маск рекомендует:  Выбор бесплатного хостинг провайдера
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL