Модальные окна (jquery-ajax)

580
.
Вот у меня проблема с ними, ни как не хотят работать. Целый день голову ломаю.
Вот код jq

<script>
window.addEvent('domready',function(){

document.id('ajax').addEvent('click',function(){
ajaxFace = new LightFace.Request({
url: 'test1.php',
width: 150,
height: 70,
buttons: [
{ title: 'Close', event: function() { this.close(); }, color: 'green' }
],
request: { 
data: { 
name: 'Blog Reader'
},
method: 'post'
},
title: 'AJAX Demo'
}).open();
});

});
</script>


Вот и html код
<a href="javascript:;" id="ajax">Открыть 1</a>
.
Этот код при нажатии на "Открыть 1" открывает файл test1.php в окне.

А как сделать так, чтобы при нажатии на "Открыть 1" открывало окно с файлом test1.php
на "Открыть 2" открывало окно с файлом test2.php
на "Открыть 3" открывало окно с файлом test3.php

Вот так
<a href="javascript:;" id="ajax">Открыть 1</a> 
<a href="javascript:;" id="ajax">Открыть 2</a> 
<a href="javascript:;" id="ajax">Открыть 3</a>
.
http://codething.ru/ajax.php
Пример 2. Динамическое обновление контента по выбору пользователя
.
1. Задай разние іd.
2. onclick заюзай для каждой ссилки и в параметрах ф-ции передавай назву файла.
.
А как тогда в js всунуть переменную или массив из базы. Типа
document.id('$res['id']') ?
.
никак походу. можна поизвращатся немного, но будет такой бред что ппц
.
У меня в базе записаны ИДы видео. И я хочу сделать при нажатии на каждый Ид чтоб открывало окно с этим идом. Как тогда такое реализовать если в js нельзя вставить массивы из базы. Вручную что ли каждый ид писать
.
echo '<a href="#" onclick="myFunc('.$res['id'].')">Видео</a>';
.
Решил проблему легко и просто.
Оказывается можно сделать так
document.id('<? echo $res['id']; ?>').addEvent('click',function()


<a  href="javascript:;" id="'.$res['id'].'"</a>
.
(\/)____o_O____(\/)
http://javascript.ru/tutorial/dom/search
.
Подборка эффектов модальных окон

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

Шаг 1. HTML
Для начала нам необходимо создать разметку модального окна, кроме этого у нас буду в диалоговом окне несколько кнопок:

<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>Модальное окно</h3>
<div>
<p>Заголовок:</p>
<ul>
<li><strong>Читать:</strong> Описание.</li>
<li><strong>Смотреть:</strong>Описание.</li>
<li><strong>Закрыть:</strong>Нажмите, чтобы закрыть.</li>
</ul>
<button class="md-close">Закрыть!</button>
</div>
</div>
</div>
...
<div class="md-overlay"></div>


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

Шаг 2. CSS
Теперь разберемся со стилями. У нас будет происходить наложение которое будет находиться после модального окна, таким образом, мы можем управлять появлением, используя смежный селектор:

.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
backface-visibility: hidden;
transform: translateX(-50%) translateY(-50%);
}

.md-show {
visibility: visible;
}

.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: rgba(143,27,15,0.8);
transition: all 0.3s;
}

.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
}


Для некоторых эффектов мы также будем добавлять классы в HTML элементы. Это необходимо для создания 3D-эффектов.

.md-perspective,
.md-perspective body {
height: 100%;
overflow: hidden;
}

.md-perspective body {
background: #222;
perspective: 600px;
}

.container {
background: #e74c3c;
min-height: 100%;
}
Всего: 17