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

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

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

#1 15 мая 2014 в 06:08

как можно осуществить вывод любой информации и видео в модальном окне (как выводятся фото в фотоальбомах) на страници или в статье?

Рекомендую хостинг beget.com (30 дней бесплатно) : https://beget.com/p1866

#2 15 мая 2014 в 10:24

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

#3 15 мая 2014 в 15:06

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

scanread

ну там я как понял из комментариев к 1,9 версии а у меня 1,10,3!

Рекомендую хостинг beget.com (30 дней бесплатно) : https://beget.com/p1866

Сегодня в 15:34

#4 15 мая 2014 в 17:21

Ложишь это в файл

$(document).ready(function() {
$('.open-window').click(function() {
$('.modal-window').fadeIn(function() {
$('.window-container').addClass('visible');
});
});
$('.close, .modal-window').click(function() {
$('.modal-window').fadeOut().end().find('.window-container').removeClass('visible');
});
$('.window-container').click(function(event) {
event.stopPropagation()
});
});

На странице где будет ссылка прописываешь путь до него и подключаешся

  <div  class="open-window" >название ссылки:</div>           
        </div>
     <div id="modal-window" class="modal-window">
<div class="window-container animation">
// здесь что выводишь
</div>
</div>

Если то что выводишь лежит в другом месте то прописываешь так

 
<a href="путь до файла" rel="#modal-window">
 <button type="button"  class="open-window" >название ссылки</button>
      </a>
         <div id="modal-window" class="modal-window">
<div class="window-container animation">
</div>
</div>

Но в этом случае есть куча нюансов и может не сработать

#5 15 мая 2014 в 17:26

"прописываешь путь до него и подключаешся" — вот этот момент не понятен, можно поподробнее!!!

Рекомендую хостинг beget.com (30 дней бесплатно) : https://beget.com/p1866

#6 15 мая 2014 в 17:33

Создал фал, modal.js.Положил его в папку site.ru/папка/. и в фале прописал

 <script src="/папка/modal.js" type="text/javascript"></script>

#7 15 мая 2014 в 18:57

к сожелению не получилось!!! а разве стандартными средствами уже заложеными в системе (типа как в фото выводится в модальном окне) — не как не сделать??

Рекомендую хостинг beget.com (30 дней бесплатно) : https://beget.com/p1866

#8 15 мая 2014 в 19:24

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

.modal-window {
background: rgba(0, 0, 0, 0.5);
display: none;
height: 100%;
width: 100%;
left: 0;
top: 0;
position: fixed;
overflow-y: scroll;
z-index: 9999;
}
.window-container {
border-radius:8px;
border-top:30px solid #6097D8;
background: #ffffff;
display: block;
margin: 10% auto;
padding: 20px;
width: 500px;
z-index: 9999;
opacity: 0;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
cursor:pointer;
}
.animation {
-webkit-transform:  scale(0.5);
-moz-transform:  scale(0.5);
-ms-transform:  scale(0.5);
transform:  scale(0.5);
 
}
.visible {
opacity: 1;
-webkit-transform:  scale(1);
-moz-transform:  scale(1);
-ms-transform:  scale(1);
transform:  scale(1);
}
.close {
display: block;
cursor: pointer;
position:absolute;
right:10px;
top:-20px;
}
.window-container form {
padding:5px;
text-align:center;
}