вывод информации в модальном окне

вывод в модальном окне

 
Посетитель
small user social cms
Медаль
Сообщений: 767
как можно осуществить вывод любой информации и видео в модальном окне (как выводятся фото в фотоальбомах) на страници или в статье?
Рекомендую хостинг 30 дней бесплатно - Ссылка
Посетитель
small user social cms
Медаль
Сообщений: 427
http://instantcms.ru/blogs/voznemozhno/modul-vsplyvayushe-okno.html не это ищите?
от 16% в месяц на автопилоте
Недорогой и надежный хостинг Промокод 20% скидка - 841de7-20
Реклама
cms
Посетитель
small user social cms
Медаль
Сообщений: 767

ну там я как понял из комментариев к 1,9 версии а у меня 1,10,3!
Рекомендую хостинг 30 дней бесплатно - Ссылка
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
Ложишь это в файл
Код PHP:
  1. $(document).ready(function() {
  2. $('.open-window').click(function() {
  3. $('.modal-window').fadeIn(function() {
  4. $('.window-container').addClass('visible');
  5. });
  6. });
  7. $('.close, .modal-window').click(function() {
  8. $('.modal-window').fadeOut().end().find('.window-container').removeClass('visible');
  9. });
  10. $('.window-container').click(function(event) {
  11. event.stopPropagation()
  12. });
  13. });
На странице где будет ссылка прописываешь путь до него и подключаешся
Код PHP:
  1. <div class="open-window" >название ссылки:</div>
  2. </div>
  3. <div id="modal-window" class="modal-window">
  4. <div class="window-container animation">
  5. // здесь что выводишь
  6. </div>
  7. </div>
Если то что выводишь лежит в другом месте то прописываешь так
Код PHP:
  1.  
  2. <a href="путь до файла" rel="#modal-window">
  3. <button type="button" class="open-window" >название ссылки</button>
  4. </a>
  5. <div id="modal-window" class="modal-window">
  6. <div class="window-container animation">
  7. </div>
  8. </div>
  9.  
Но в этом случае есть куча нюансов и может не сработать
Посетитель
small user social cms
Медаль
Сообщений: 767
"прописываешь путь до него и подключаешся" - вот этот момент не понятен,можно поподробнее!!
Рекомендую хостинг 30 дней бесплатно - Ссылка
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
Создал фал, modal.js.Положил его в папку http://site.ru/папка/. и в фале прописал
Код PHP:
  1. <script src="/папка/modal.js" type="text/javascript"></script>
Посетитель
small user social cms
Медаль
Сообщений: 767
к сожелению не получилось!!а разве стандартными средствами уже заложеными в системе (типа как в фото выводится в модальном окне) - не как не сделать??
Рекомендую хостинг 30 дней бесплатно - Ссылка
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
Если это не получилось, то стандартные тем более не получатся. Теоретически можно, но нужно кучу информации перелопатить, с наскоку не выйдет. У меня тоже подобная проблема, приходится в аякс вникать, а временно сделал модальное окно, что вам дал.
Вы вероятно стили для самого окно не прописали. Вот мои.
Код PHP:
  1. .modal-window {
  2. background: rgba(0, 0, 0, 0.5);
  3. display: none;
  4. height: 100%;
  5. width: 100%;
  6. left: 0;
  7. top: 0;
  8. position: fixed;
  9. overflow-y: scroll;
  10. z-index: 9999;
  11. }
  12. .window-container {
  13. border-radius:8px;
  14. border-top:30px solid #6097D8;
  15. background: #ffffff;
  16. display: block;
  17. margin: 10% auto;
  18. padding: 20px;
  19. width: 500px;
  20. z-index: 9999;
  21. opacity: 0;
  22. -webkit-transition: 0.4s;
  23. -moz-transition: 0.4s;
  24. -ms-transition: 0.4s;
  25. -o-transition: 0.4s;
  26. transition: 0.4s;
  27. cursor:pointer;
  28. }
  29. .animation {
  30. -webkit-transform: scale(0.5);
  31. -moz-transform: scale(0.5);
  32. -ms-transform: scale(0.5);
  33. transform: scale(0.5);
  34.  
  35. }
  36. .visible {
  37. opacity: 1;
  38. -webkit-transform: scale(1);
  39. -moz-transform: scale(1);
  40. -ms-transform: scale(1);
  41. transform: scale(1);
  42. }
  43. .close {
  44. display: block;
  45. cursor: pointer;
  46. position:absolute;
  47. right:10px;
  48. top:-20px;
  49. }
  50. .window-container form {
  51. padding:5px;
  52. text-align:center;
  53. }
Редактировалось: 1 раз (Последний: 15 мая 2014 в 19:26)
Посетитель
small user social cms
Медаль
Сообщений: 446
http://instantcms.ru/blogs/voznemozhno/modul-vsplyvayushe-okno.html
http://instantcms.ru/blogs/kak-to-tak/variant-modelnogo-okna-na-saite.html
Редактировалось: 1 раз (Последний: 16 мая 2014 в 02:02)
Просто так...
Посетитель
small user social cms
Медаль
Сообщений: 767
большое спасибо!! вторая ссылка помогла - как раз для 1,10,3!!тема закрыта!!!!
Рекомендую хостинг 30 дней бесплатно - Ссылка
В начало страницы
Предыдущая темаСледующая тема Перейти на форум: