Как создать модальное окно с анимацией?

голоса: 0
Всем доброго времени суток. Не получается найти решение в интернете, может просто не правилно  искал. Суть в том что я хочу сделать у себя на сайте  окно которое будет открываться при нажатии кнопки, и ВНУТРИ этого окна будет автоматически воспроизводиться анимация. Как это можно сделать ? Заранее спасибо за помощь.
| Автор: | Категория: Дизайн сайта
Изменение категории | | Автор: Yuri_Geruk

Ответов: 2

Голоса: +1
 
Лучший ответ

<button onclick="$.fancybox('#viplay');return false;">Play</button>
<div id="viplay" style="display:none;"><video width="400" height="300" controls="controls" autoplay="autoplay"><source src="ссылка к видео"  /></video></div>

| Автор:
Выбор ответа лучшим | | Автор: Yuri_Geruk
Спасибо! Это то что нужно! Только оно почемуто автоматически не начинает проигрываться. Можно сделать так что бы оно при открытии сразу начинало проигрывать видео?

Хром? Гугл заблокировал в хроме автоплей. Тогда берите этот код.

<button onclick="openvi();">Play</button>

<div id="viplay" style="display:none;"><video width="400" height="300" controls="controls" autoplay="autoplay"><source src="ссылка к видео" /></video></div>
<script>
function openvi(){
 new _uWnd('viplay','video',500,400,{align:'center',shadow:1,resize:0,autosize:1},$('#viplay').html());
 };
</script>

голоса: 0
Прочтите материал https://www.ucoz.ru/help/design/plavnoe-razvorachivanie-sozdanie-ajax-okon это не полное решение, а лишь создание модального окна, анимацию найдете сами и добавите внутрь окна.
| Автор:
Я прочитал статью, но все равно сталкиваюсь с той же проблемой. Ajax  окна содержат текстовую информацию, а мне нужно  что бы в  окне проигрывалась анимация. Я думаю если вставить ссылку на анимацию вместо текста то нужного результата я наврядли добьюсь :)
Versus,
Нужно не думать, а пробовать. Если будете лишь размышлять, тогда ничего не сделаете.
Yuri_Geruk,

Точно подмечено =) Можете подсказать  в какую часть кода вставить ссылку на анимацию? Где "содержимое окна"?

 <a href="javascript://" onclick="new _uWnd('name','Заголовок окна',500,200,{min:1,shadow:1,modal:1,header:1,max:1,nomove:0,resize:1},'Содержимое окна');">Ссылка, вызывающая окно</a>
...