Любовь к спорту на всю жизнь
Привет, Гость!

  • Страница 1 из 1
  • 1
Форум » Мусорка » Корзина [архив] » Wnd [1.0] — модальные окна
Wnd [1.0] — модальные окна
Torres_1_Дата: Воскресенье, 08.08.2010, 22:22 | Сообщение # 1
Генералиссимус
Группа: Администраторы
Сообщений: 2124
Награды: 0
Репутация: 12
Статус: Offline

Скрипт проверен работает во всех современных браузерах: IE7, Firefox3, Opera10 и Safari4.
Установка:

Для начала поставим сам скрипт, который будет создавать окно:
Код
function winrem(a) {  
   a.parentNode.nextSibling.style.display = 'none';  
   a.parentNode.style.display = 'none';  
}  

function jWnd(params) {  
   params = params || {};  
   k = (!-[1,]) ? 0 : 8;  
   var e = document.createElement('div');  
   var leftmargin = ((document.body.offsetWidth / 2) - (params.w / 2));  
   var topmargin = ( ((!-[1,]) ? document.body.offsetHeight : window.innerHeight) / 2) - (params.h / 2)  
   var headerinner = params.header ? '<div style="font-weight: bold;color: white; position: absolute; width: ' + (params.w + k) + '; height: 20px; background: #b52828; top: ' + (topmargin - 20) + '; left: ' + leftmargin + 'px;"><span style="float:left">' + params.header + '</span><a style="float:right;color:white;" href="javascript://" onclick="winrem(this);">X</a></div>' : '';  
   var content = params.content ? params.content : '<iframe src="' + params.url + '" height="100%" width="100%" frameborder="0"></iframe>';  
   e.innerHTML = headerinner + '<div style="border:4px solid #00b4ff;color: white; position: absolute; width: ' + params.w + '; height: ' + params.h + '; background: #3e3e3e; top: ' + topmargin + '; left: ' + leftmargin + 'px;">' + content + '</div>';  
   document.body.appendChild(e);  
}

Теперь можно добавлять окна таким кодом:
Код
<a href="javascript://" onclick="jWnd({w: 500,h: 300,content: 'Ваш текст',header: 'Заголовок''};);"> Открыть текст в jWnd </a>

В первом примере — открытие сайта, во втором — открытие текста в окне. Параметр w отвечает за ширину окна, h — за высоту, в header пишется заголовок. Если нужно отобразить сайт — в url пишем его адрес, если текст — в content пишем свой текст.

Пока это самая первая версия, в следующей будет много усовершенствований: Drag'n'drop, поддержка XML, возможность изменять размеры окна и многое другое.
 
Форум » Мусорка » Корзина [архив] » Wnd [1.0] — модальные окна
  • Страница 1 из 1
  • 1
Поиск:
Навигация
Главная страница Форум сайта Создание сайтов на uCoz Заработок в интернете Уроки Photoshop Автомобиль от А до Я Электроника Всё для смартфонов Браузерные игры Музыка Последние комментарии Статистика
Развлечения
Сегодня день рождения у: Описание сайта
Новое на форуме
Опрос
Опрос сайта
Какой у вас браузер?
javascript:; javascript:;
Всего ответов: 176

Общение
Загрузка…
Статистика
Зарег. на сайте
Всего: 267
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
Из них
Администраторов: 1
Модераторов: 0
Проверенных: 1
Обычных юзеров: 264
Из них
Парней: 234
Девушек: 33


Друзья сайта
Возможен баннерообмен 81х31.Писать ЛС.