Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.08.2011, 23:03
Аспирант
Отправить личное сообщение для ctpz Посмотреть профиль Найти все сообщения от ctpz
 
Регистрация: 30.06.2011
Сообщений: 63

Модальные окошки
Как создать модальные окошки как в примере на этой странице, но на чистом js.
Ответить с цитированием
  #2 (permalink)  
Старый 01.08.2011, 23:12
Аспирант
Отправить личное сообщение для ctpz Посмотреть профиль Найти все сообщения от ctpz
 
Регистрация: 30.06.2011
Сообщений: 63

window.showModalDialog
не подходит для решения. Он не принимает стили.
Ответить с цитированием
  #3 (permalink)  
Старый 01.08.2011, 23:49
Аватар для scuter
Профессор
Отправить личное сообщение для scuter Посмотреть профиль Найти все сообщения от scuter
 
Регистрация: 14.03.2008
Сообщений: 169

http://dev.sencha.com/deploy/ext-4.0...x/msg-box.html
вроди на jQuery тоже есть такое
Ответить с цитированием
  #4 (permalink)  
Старый 02.08.2011, 10:09
Аспирант
Отправить личное сообщение для ctpz Посмотреть профиль Найти все сообщения от ctpz
 
Регистрация: 30.06.2011
Сообщений: 63

Да, не jquery есть такое, и я могу это сделать, но я хочу сделать
Сообщение от ctpz Посмотреть сообщение
но на чистом js.
Спасибо, scuter

Последний раз редактировалось ctpz, 02.08.2011 в 10:13.
Ответить с цитированием
  #5 (permalink)  
Старый 02.08.2011, 12:13
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

Сообщение от ctpz
но я хочу сделать
Так ты ищешь готовый скрипт или хочешь свой сам сделать ?
Если готовый, то в гугле их много
Если же ты хочешь сам написать, тогда что конкретно тебя интересует (непонятно в чем вопрос) ?
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #6 (permalink)  
Старый 02.08.2011, 13:54
Аватар для SkyLight
Злюка-бобер
Отправить личное сообщение для SkyLight Посмотреть профиль Найти все сообщения от SkyLight
 
Регистрация: 21.03.2010
Сообщений: 438

Вам нужно всего-то взять любой достаточно простой скрипт и разобраться, как он работает.
__________________
In WEB We Trust
У всех есть своя темная сторона...
Ответить с цитированием
  #7 (permalink)  
Старый 02.08.2011, 14:16
Аспирант
Отправить личное сообщение для ctpz Посмотреть профиль Найти все сообщения от ctpz
 
Регистрация: 30.06.2011
Сообщений: 63

Сообщение от walik Посмотреть сообщение
Так ты ищешь готовый скрипт или хочешь свой сам сделать ?
Если готовый, то в гугле их много
Если же ты хочешь сам написать, тогда что конкретно тебя интересует (непонятно в чем вопрос) ?
Ищу готовый, чтобы посмотерть как сделано и сделать свой.
Ответить с цитированием
  #8 (permalink)  
Старый 02.08.2011, 16:37
Профессор
Отправить личное сообщение для розовый слоник Посмотреть профиль Найти все сообщения от розовый слоник
 
Регистрация: 17.10.2009
Сообщений: 258

начинай копать отсюда и до забора
Ответить с цитированием
  #9 (permalink)  
Старый 02.08.2011, 22:30
Аспирант
Отправить личное сообщение для ctpz Посмотреть профиль Найти все сообщения от ctpz
 
Регистрация: 30.06.2011
Сообщений: 63

Ответить с цитированием
  #10 (permalink)  
Старый 03.08.2011, 00:09
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от ctpz
щу готовый, чтобы посмотерть как сделано и сделать свой.
в гугле миллионы таких скриптов, вы просите нас искать вам решение?

примерный псевдокод для выравнивания элемента по центру:

Element.css({
	position: 'fixed',
	top : (window.height - Element.outerHeight()) / 2 + 'px',
	left : (window.width - Element.outerWidth()) / 2 +'px'
});


Есть у меня небольшой плагин (стильники и разметка на работе) с использованиеи jQuery, очень простой лайтбокс:

/**
 * Modalbox is an implementation of non-standard modal window
 * Use:
 * $('.modalbox').modalbox({
 * 		close : '.close'
 * 		fade : 100,
 * });
 * Licensed under the MIT
 *
 * @author: Alexander Guinness
 * @version: 1.0
 * @this: {jQuery Object}
 * @params {fade} sets jQuery method fadeIn();
 * @params {close} jQuery Object
 * @params {id} unique id for Modalbox
 * @date: Mon Jun 01 10:00:00 2011
**/

$.fn.extend({
	modalbox: function(options) {
	var _this = this,
		$window = $(window),
        //значения по-умолчанию
		setts = $.extend({
			fade : 300,
			close : '',
			id : '#modalbox'
		}, options),
        //выравнивание элмента по цетру
		center = function() {
			_this.css({
				position: 'fixed',
				top : ($window.height() - _this.outerHeight()) / 2 + 'px',
				left : ($window.width() - _this.outerWidth()) / 2 +'px'
			})
			.fadeIn(setts.fade);
		}
        //фотновое затемнение
		!$(setts.id)[0] ? $('<div />', {
			id : setts.id.substring(1)
		}).append(this).appendTo('body') : $(setts.id).show();
		
		$(setts.close).click(function(event) {
			$(setts.id).fadeOut(setts.fade);
			event.preventDefault();
		});
        //скрытие окна
		hideOverlay(setts.id, 'fadeOut', setts.fade);
		center();
        //пользовательское изменение размеров окна
		$window.resize(center);
		return this;
	}
});

//HIDE OVERLAY
/**
 * hideOverlay is an implementation of hideOverlay function
 * Use:  hideOverlay('id', 'fadeIn', 300);
 * Licensed under the MIT
 *
 * @author: Alexander Guiness
 * @version: 1.0
 * @params {id} HTML identifier (id, class, etc...);
 * @params {method} jQuery method (hide, show, fadeIn, etc..)
 * @params {params} jQuery method's value
 * @date: Mon Jan 01 10:00:00 2011
**/
function hideOverlay(id, method, params) {
	var $id = $(id),
	setts = {
		isVisible : function() {
			return $id.is(':visible');
		},
		isCall : function() {
			return $id[method](params);
		}
	};

	$(document).bind({
		click : function(event) {
			if(setts.isVisible() && !$(event.target).andSelf().parents(id)[0]) {
				setts.isCall();
			}
		},
		keydown : function(event) {
			if(setts.isVisible() && event.which == 27) {
				setts.isCall();
			}
		}
	});
}

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

вот это нужно:
http://javascript.ru/blog/Andrej-Par...enta-elementov
http://javascript.ru/ui/offset+
http://javascript.ru/tutorial/events/crossbrowser

Последний раз редактировалось monolithed, 03.08.2011 в 00:15.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Модальные окна и $().html(); maxsoftware jQuery 2 12.04.2010 10:01
красивые окошки.... Ergall-M (X)HTML/CSS 1 30.04.2008 13:36