Архив метки: Web-программирование

Изучаю CSS, JS и jQuery. 6
Мое модальное окно на jQuery

20.06.2014 askhat Добавить комментарий

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

Его вызов должен быть простым по коду
Закрываться окно должно по клику на фоне
Вся разметка содержания окна содержится в div-блоке - ничего предустановленного, кроме размеров окна, не должно быть

Читать далее →

Мои университеты

Изучаю CSS, JS и jQuery. 5
Простейшее модальное окно

18.06.2014 askhat

Эксперименты с командой скрыть блок
Эксперименты с командой показать блок. Скрытие по клику на предыдущей гиперссылке.
Эксперименты с командой показать блок с фоном. Скрытие по клику на фоне.
Эксперименты с командой показать фон. Скрытие по клику на фоне.
Читать далее Изучаю CSS, JS и jQuery. 5
Простейшее модальное окно →

Мои университеты

Изучаю CSS, JS и jQuery. 4
Эксперименты с модальным окном

17.06.2014 askhat Добавить комментарий

Анализ рассмотренных примеров модальных окон

Показать div-блок. Реализована функция вызова из урока 1
Читать далее →

Мои университеты

Изучаю CSS, JS и jQuery. 3
Еще пример модального окна

16.06.2014 askhat

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

Исходные стиль, js-функции, код div-блока и его вызов

CSS-стиль

<style type="text/css" media="screen">
#background { 
  left: 0; 
  top: 0; 
  position: absolute; 
  background: #000; 
  opacity: 0.7; 
  z-index: 999; 
  display: none; 
  height: 100%; 
  width: 100%; 
} 
 
#modal_window { 
  display: none; 
  z-index: 9999; 
  border: 1px solid #444; 
  background-color: #FEFEFE; 
  border-radius: 10px; 
  padding: 15px 20px; 
  height: 250px; 
  width: 450px; 
}
</style>

#background {

left: 0;

top: 0;

position: absolute;

background: #000;

opacity: 0.7;

z-index: 999;

display: none;

height: 100%;

width: 100%;

}

#modal_window {

display: none;

z-index: 9999;

border: 1px solid #444;

background-color: #FEFEFE;

border-radius: 10px;

padding: 15px 20px;

height: 250px;

width: 450px;

}

</style>

JS-функции

<script type="text/javascript" charset="utf-8">
/* Открываем модальное окно: */
function open_popup(box) { 
  $("#background").show() 
  $(box).centered_popup(); 
  $(box).delay(100).show(1); 
} 
 
/* Закрываем модальное окно: */
function close_popup(box) { 
  $(box).hide(); 
  $("#background").delay(100).hide(1); 
} 
 
$(document).ready(function() { 
  /* Позиционируем блочный элемент окна по центру страницы: */
  $.fn.centered_popup = function() { 
    this.css('position', 'absolute'); 
    this.css('top', ($(window).height() - this.height()) / 2 + $(window).scrollTop() + 'px'); 
    this.css('left', ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + 'px'); 
  } 
 
});
</script>

/* Открываем модальное окно: */

function open_popup(box) {

$("#background").show()

$(box).centered_popup();

$(box).delay(100).show(1);

}

/* Закрываем модальное окно: */

function close_popup(box) {

$(box).hide();

$("#background").delay(100).hide(1);

}

$(document).ready(function() {

/* Позиционируем блочный элемент окна по центру страницы: */

$.fn.centered_popup = function() {

this.css('position', 'absolute');

this.css('top', ($(window).height() - this.height()) / 2 + $(window).scrollTop() + 'px');

this.css('left', ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + 'px');

}

});

</script>

Код div-блока:

<div id="modal_window" onclick="close_popup('#modal_window');">
  <a onclick="close_popup('#modal_window');" href="#" rel="nofollow">Закрыть окно</a>
<span class='MathJax_Preview'><img src='http://basharov.me/wp-content/plugins/latex/cache/tex_c9faf6ead2cd2c2187bd943488de1d0a.gif' style='vertical-align: middle; border: none; padding-bottom:1px;' class='tex' alt="\mu" /></span><script type='math/tex'>\mu</script>
  <p>Пример скачан с <a href="http://red-book-cms.ru" rel="nofollow">http://red-book-cms.ru </a>.</p>
</div>
<div id="background" onclick="close_popup('#modal_window');"></div>

<a onclick="close_popup('#modal_window');" href="#" rel="nofollow">Закрыть окно</a>

[latex]\mu[/latex]

<p>Пример скачан с <a href="http://red-book-cms.ru" rel="nofollow">http://red-book-cms.ru </a>.</p>

</div>

Вызов

<a onclick="open_popup('#modal_window');" href="#" rel="nofollow">Открыть окно</a>

1	<a onclick="open_popup('#modal_window');" href="#" rel="nofollow">Открыть окно</a>

Открыть окно

Закрыть окно
$\mu$

Спойлер в окне

Пример скачан с http://red-book-cms.ru .

Читать далее Изучаю CSS, JS и jQuery. 3
Еще пример модального окна →

Мои университеты

Изучаю CSS, JS и jQuery. 2
Показ/скрытие div-блока как модальное окно

15.06.2014 askhat

Теперь посмотрим, как на основании изученной простейшей функции сделать всплывающее по клику окно. Введем div-блок со стилем, взятым из рассмотренного примера всплывающего окна.

Стиль и код div-блока, рассматриваемого как всплывающее окно

<style type="text/css" media="screen">
 .roditelskoe_okno {
    opacity: 0.89;
    background: #FFF;
    width: 100%;
    height: 100%;
    display: none;
    left: 0;
    top: 0;
    position: fixed;
    z-index: 100;
  }
  .okno {
    width: 560px;
    background-clip: padding-box;
    background-color: #FFF;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    left: 50%;
    top: 10%;
    margin-left: -280px;
    position: fixed;
    outline: medium none;
    z-index: 1050;
  }
  .telo-okna {
    position: relative;
    overflow-y: auto;
    padding: 15px;
    max-height: 400px;
  }
  </style>

.roditelskoe_okno {

opacity: 0.89;

background: #FFF;

width: 100%;

height: 100%;

display: none;

left: 0;

top: 0;

position: fixed;

z-index: 100;

}

.okno {

width: 560px;

background-clip: padding-box;

background-color: #FFF;

box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);

border-radius: 6px;

border: 1px solid rgba(0, 0, 0, 0.3);

left: 50%;

top: 10%;

margin-left: -280px;

position: fixed;

outline: medium none;

z-index: 1050;

}

.telo-okna {

position: relative;

overflow-y: auto;

padding: 15px;

max-height: 400px;

}

</style>

Код div-блока:

<div id="my_w1" class="roditelskoe_okno"><div class="okno"><div class="telo-okna">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam[...]</p><a onclick="$('#my_w1').hide()">Скрыть div-блок</a>
</div></div></div>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam[...]</p><a onclick="$('#my_w1').hide()">Скрыть div-блок</a>

</div></div></div>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam[...]

Скрыть div-блок

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

<a onclick="$('#my_w1').hide()">Скрыть упомянутый div-блок</a>
<a onclick="$('#my_w1').css('display','block')">Показать упомянутый div-блок</a>

1 2	<a onclick="$('#my_w1').hide()">Скрыть упомянутый div-блок</a> <a onclick="$('#my_w1').css('display','block')">Показать упомянутый div-блок</a>

Результат
Показать упомянутый div-блок

Читать далее →

Мои университеты

Изучаю CSS, JS и jQuery. 1
Как найти, показать и скрыть div-блок

14.06.2014 askhat

Библиотека jQuery позволяет полностью избавить разметку от встраиваемых сценариев благодаря ее способности с легкостью перехватывать элементы страницы и присоединять к ним код естественным, CSS-подобным способом. Библиотека jQuery не ограничивается лишь вмешательством в HTML-код существующих страниц — она также позволяет добавлять новые элементы страниц и фрагменты документов с помощью коллекции удобных функций. Существуют функции для вставки новых HTML-фрагментов в любую часть страницы. Можно перемещать, удалять или клонировать существующие элементы.

Читать далее Изучаю CSS, JS и jQuery. 1
Как найти, показать и скрыть div-блок →

Мои университеты

Изучаю CSS. 3. Еще раз о позиционировании

04.05.2014 askhat

Моя цель и способ отображения изучаемых примеров

Сначала информацию, варианты отображения которой будем исследовать, поместим в div-блок с заданным классом:

<div class="my_w" align="center"><span class='MathJax_Preview'><img src='http://basharov.me/wp-content/plugins/latex/cache/tex_c9faf6ead2cd2c2187bd943488de1d0a.gif' style='vertical-align: middle; border: none; padding-bottom:1px;' class='tex' alt="\mu" /></span><script type='math/tex'>\mu</script> - греческая буква в кодировке Латех. Видно?
</div>

1 2	<div class="my_w" align="center">[latex]\mu[/latex] - греческая буква в кодировке Латех. Видно? </div>

Читать далее →

Мои университеты

Изучаю CSS. 2. Позиционирование чужих блоков

02.05.2014 askhat

Моя цель и рассматриваемые примеры

Я помещаю код плагина спойлера в div-контейнер с id="vertical_1" и буду изучать возможности изменения его позиционирования. Код div-блока, отображение которого исследуется

<div id="vertical_1">[su_spoiler title="Тестовый спойлер в блоке" icon="caret"]Текст внутри тестового спойлера, помещенного в блок "vertical_1".[/su_spoiler]</div>

1	<div id="vertical_1">[su_spoiler title="Тестовый спойлер в блоке" icon="caret"]Текст внутри тестового спойлера, помещенного в блок "vertical_1".[/su_spoiler]</div>

Читать далее →

Мои университеты

Изучаю CSS. 1. Пример кнопки

26.04.2014 askhat

Моя цель, среда программирования и рассматриваемый пример

При web-программировании необходимо отделять содержимое страницы от его оформления:

Структура (содержимое и элементы) документа определяется языком разметки HTML.
Внешний вид и расположение элементов содержимого определяется каскадной таблицей стилей CSS.

Посмотрим, как эти правила выглядят для кнопки:
Мои упражнения по программированию
Положение кнопки определено структурой документа.

HTML-код вставки кнопки

Читать далее →

Математика и физика с Асхатом Башаровым

Архив метки: Web-программирование

Изучаю CSS, JS и jQuery. 6
Мое модальное окно на jQuery

Изучаю CSS, JS и jQuery. 5
Простейшее модальное окно

Изучаю CSS, JS и jQuery. 4
Эксперименты с модальным окном

Изучаю CSS, JS и jQuery. 3
Еще пример модального окна

Изучаю CSS, JS и jQuery. 2
Показ/скрытие div-блока как модальное окно

Изучаю CSS, JS и jQuery. 1
Как найти, показать и скрыть div-блок

Изучаю CSS. 3. Еще раз о позиционировании

Изучаю CSS. 2. Позиционирование чужих блоков

Изучаю CSS. 1. Пример кнопки

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