Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.02.2013, 12:24
Новичок на форуме
Отправить личное сообщение для olga007 Посмотреть профиль Найти все сообщения от olga007
 
Регистрация: 28.02.2013
Сообщений: 2

6 всплывающих окон на странице
Всем привет,
такая задача: на странице 6 ссылок в виде разных картинок. По нажатию на каждую должно всплывать окошко с описанием.
Как сделать такое окошко для 1 ссылки я нашла в интернете, но как сделать для 6 ссылок с разными id? Не переписывать же скрипт 6 раз :-)
Подскажите пожалуйста....

html:
<body>
	<div id="wrapper">
    	<img id="bg" src="images/bg-wrapper.jpg" alt="" width="1200" height="850" />
        <a href="" id="windowOpen6"></a>
        <div id="window">
            <div id="windowTop">
                <div id="windowTopContent">
                    Дом 6
                </div>
            <img src="images/window_min.jpg" id="windowMin" />
            <img src="images/window_max.jpg" id="windowMax" />
            <img src="images/window_close.jpg" id="windowClose" />
            </div>
            <div id="windowBottom">
                <div id="windowBottomContent">&nbsp;
                </div>
            </div>
            
            <div id="windowContent">
                <img src="images/dom6.jpg" alt="" width="275" height="185" />
            </div>
            <img src="images/window_resize.gif" id="windowResize" />
        </div>
	</div>
</body>


скрипт:
$(document).ready(
	function()
	{
		$('#windowOpen6').bind('click',function() {
			if($('#window').css('display') == 'none') {
				$(this).TransferTo(
					{
						to:'window',
						className:'transferer2',
						duration: 200,
						complete: function()
						{
							$('#window').show();
						}
					});
			}
		this.blur();
		$("#bg").css('opacity', '0.7');
		return false;
		});

$('#windowClose').bind('click',function(){
	$('#window').TransferTo(
	{
		to:'windowOpen',
		className:'transferer2', 
		duration: 200
	}).hide();
	$("#bg").css('opacity', '1');
	});
	
$('#windowMin').bind('click',function(){
	$('#windowContent').SlideToggleUp(300);
	$('#windowBottom, #windowBottomContent').animate({height: 10}, 300);
	$('#window').animate({height:40},300).get(0).isMinimized = true;
	$(this).hide();
	$('#windowResize').hide();
	$('#windowMax').show();
});

$('#windowMax').bind('click',function(){
	var windowSize = $.iUtil.getSize(document.getElementById('windowContent'));
	$('#windowContent').SlideToggleUp(300);
	$('#windowBottom, #windowBottomContent').animate({height: windowSize.hb + 13}, 300);
	$('#window').animate({height:windowSize.hb+43}, 300).get(0).isMinimized = false;
	$(this).hide();
	$('#windowMin, #windowResize').show();
});

$('#window').Resizable({
	minWidth: 575,
	minHeight: 385,
	maxWidth: 575,
	maxHeight: 385,
	dragHandle: '#windowTop',
	handlers: {
	se: '#windowResize'
	},

onResize : function(size, position) {
	$('#windowBottom, #windowBottomContent').css('height', size.height-33 + 'px');
	var windowContentEl = $('#windowContent').css('width', size.width - 25 + 'px');
	if (!document.getElementById('window').isMinimized) {
		windowContentEl.css('height', size.height - 48 + 'px');
	}
}
});
}
);


Спасибо, буду признательна за подсказку...
Ответить с цитированием
  #2 (permalink)  
Старый 28.02.2013, 14:06
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,782

Сообщение от olga007
как сделать для 6 ссылок с разными id?
Варианты:
- передавать ИД параметрами
- использовать классы и структуру ДОМ
Ответить с цитированием
  #3 (permalink)  
Старый 28.02.2013, 14:42
Новичок на форуме
Отправить личное сообщение для olga007 Посмотреть профиль Найти все сообщения от olga007
 
Регистрация: 28.02.2013
Сообщений: 2

ksa,

спасибо, воспользуюсь первым вариантом.
Ответить с цитированием
  #4 (permalink)  
Старый 28.02.2013, 22:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,569

olga007,
Диалоговое окно UI
Ответить с цитированием
  #5 (permalink)  
Старый 28.02.2013, 22:49
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

olga007,
А принтскрин итогового вида можно ?
Чот тут наворочено (*Или ссылку на демо
Ответить с цитированием
  #6 (permalink)  
Старый 28.02.2013, 22:50
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

Deff, я думал только мне это странным показалось)
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #7 (permalink)  
Старый 28.02.2013, 22:52
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Текущий скрипт с данным контентом в Опере не запускается
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тест</title>


<script src="http://code.jquery.com/jquery-latest.js"></script>


</head>
<body>
<body>
	<div id="wrapper">
    	<img id="bg" src="images/bg-wrapper.jpg" alt="" width="1200" height="850" />
        <a href="" id="windowOpen6"></a>
        <div id="window">
            <div id="windowTop">
                <div id="windowTopContent">
                    Дом 6
                </div>
            <img src="images/window_min.jpg" id="windowMin" />
            <img src="images/window_max.jpg" id="windowMax" />
            <img src="images/window_close.jpg" id="windowClose" />
            </div>
            <div id="windowBottom">
                <div id="windowBottomContent">&nbsp;
                </div>
            </div>
            
            <div id="windowContent">
                <img src="images/dom6.jpg" alt="" width="275" height="185" />
            </div>
            <img src="images/window_resize.gif" id="windowResize" />
        </div>
	</div>


<script type="text/javascript">
$(document).ready(
	function()
	{
		$('#windowOpen6').bind('click',function() {
			if($('#window').css('display') == 'none') {
				$(this).TransferTo(
					{
						to:'window',
						className:'transferer2',
						duration: 200,
						complete: function()
						{
							$('#window').show();
						}
					});
			}
		this.blur();
		$("#bg").css('opacity', '0.7');
		return false;
		});

$('#windowClose').bind('click',function(){
	$('#window').TransferTo(
	{
		to:'windowOpen',
		className:'transferer2', 
		duration: 200
	}).hide();
	$("#bg").css('opacity', '1');
	});
	
$('#windowMin').bind('click',function(){
	$('#windowContent').SlideToggleUp(300);
	$('#windowBottom, #windowBottomContent').animate({height: 10}, 300);
	$('#window').animate({height:40},300).get(0).isMinimized = true;
	$(this).hide();
	$('#windowResize').hide();
	$('#windowMax').show();
});

$('#windowMax').bind('click',function(){
	var windowSize = $.iUtil.getSize(document.getElementById('windowContent'));
	$('#windowContent').SlideToggleUp(300);
	$('#windowBottom, #windowBottomContent').animate({height: windowSize.hb + 13}, 300);
	$('#window').animate({height:windowSize.hb+43}, 300).get(0).isMinimized = false;
	$(this).hide();
	$('#windowMin, #windowResize').show();
});

$('#window').Resizable({
	minWidth: 575,
	minHeight: 385,
	maxWidth: 575,
	maxHeight: 385,
	dragHandle: '#windowTop',
	handlers: {
	se: '#windowResize'
	},

onResize : function(size, position) {
	$('#windowBottom, #windowBottomContent').css('height', size.height-33 + 'px');
	var windowContentEl = $('#windowContent').css('width', size.width - 25 + 'px');
	if (!document.getElementById('window').isMinimized) {
		windowContentEl.css('height', size.height - 48 + 'px');
	}
}
});
}
);

</script>





</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как можно обойти блокировку всплывающих окон? azazello Общие вопросы Javascript 12 20.07.2015 11:18
Переключение radiobutton на странице Дуб-Дубом Элементы интерфейса 2 24.09.2012 08:49
Не выполняется скрипт на подгружаемой странице AlThar ExtJS 1 21.01.2011 15:10
Определить включена ли блокировка всплывающих окон в Google Chrome neoweb Opera, Safari и др. 0 18.01.2010 10:53
window.open и блокировка всплывающих окон Phoenix Events/DOM/Window 10 09.12.2009 17:47