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

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО

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

#1 15 мая 2014 в 06:08
как можно осуществить вывод любой информации и видео в модальном окне (как выводятся фото в фотоальбомах) на страници или в статье?
#3 15 мая 2014 в 15:06


instantcms.ru/blogs/voznemozhno/modul-vsplyvayushe-okno.html не это ищите?

scanread

ну там я как понял из комментариев к 1,9 версии а у меня 1,10,3!
#4 15 мая 2014 в 17:21
Ложишь это в файл
  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. });
На странице где будет ссылка прописываешь путь до него и подключаешся
  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>
Если то что выводишь лежит в другом месте то прописываешь так
  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.  
Но в этом случае есть куча нюансов и может не сработать
#5 15 мая 2014 в 17:26
"прописываешь путь до него и подключаешся" — вот этот момент не понятен, можно поподробнее!!!
#6 15 мая 2014 в 17:33
Создал фал, modal.js.Положил его в папку site.ru/папка/. и в фале прописал
  1. <script src="/папка/modal.js" type="text/javascript"></script>
#7 15 мая 2014 в 18:57
к сожелению не получилось!!! а разве стандартными средствами уже заложеными в системе (типа как в фото выводится в модальном окне) — не как не сделать??
#8 15 мая 2014 в 19:24
Если это не получилось, то стандартные тем более не получатся. Теоретически можно, но нужно кучу информации перелопатить, с наскоку не выйдет. У меня тоже подобная проблема, приходится в аякс вникать, а временно сделал модальное окно, что вам дал.
Вы вероятно стили для самого окно не прописали. Вот мои.
  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. }
#10 16 мая 2014 в 04:43
большое спасибо!!! вторая ссылка помогла — как раз для 1,10,3!!! тема закрыта!!!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.