ОсновноеRadiotalkПользовательское
MPCHAT - CMS хостинг чатов для профессионалов
83   •   Посмотреть все темы

скрипт Модальные окна для чата

 

2615
1007
BETEPAH @BETEPAH
Foggy пишет:

BETEPAH,
1. блок, за который надо тянуть - не в самом углу, не хватает 4px
2. можно растянуть за границы окна с появлением прокрутки
3. при подтаскивании блока к нижнему правому углу, блок резко отскакивает по диагонали назад. кстати, эта же проблема есть в скрипте Pegass(при уменьшении допустимых отступов от краёв).
4. ещё, когда создано много окон и они наезжают друг на друга, хорошо бы, чтоб по клику они получали фокус. ну, менять z-index, наверно.
или, как вариант, не давать одним блокам наезжать на другие.

1. Решается отрицательным маржином
.resizeButton { position: absolute; right: 0; bottom: 0; margin-bottom: -4px;}
2. Не понял
3. В каком браузере? ФФ 15 - не смог смодулировать такую ситуацию.
4. Можно будет сделать. Плюс, наверное у неактивных окон надо будет менять цвет заголовка, да? 😉
Pegass пишет:

1 - при ресайзе можно вытащить чуть вправо и вниз
2) залипание мыши при ресайзе если отпустить за пределами документа )))
3) скрипт по созданию окон не плохо переделать на заполнение контентом creatModal(content,title,res_on_off ); content - контент вместе с хтмл, title - заголовок нового окна , res_on_off - можно ли изменять размер

Это всё решается. Допилю на днях, при наличии времени.

Отредактировано BETEPAH - 07.10.2012
2970
удалён @Foggy
1. Странно, я так пытался сделать, не получалось ─ появлялась прокрутка. Сейчас всё получилось.
2. Мысль аналогична пункту 1 у Pegass.
3. Хром последний стабильный. Снова странно, проблема пропала. Возможно, я её тогда вызвал какими-то изменениями, хотя я и проверял твою версию без изменений. В общем, на этот пункт можно забить.
4. Ахах, мысль дельная, расширять ─ так расширять, но лично мне это будет не нужно) а если потребуется, думаю, с этим я справлюсь.
Это всё решается. Допилю на днях, при наличии времени.
Круто, буду ждать)

1007
BETEPAH @BETEPAH
Ну, вроде все пожелания учел, в плюс добавил еще возможность задания размеров всплывающего окна - **********
Показать текст

2970
удалён @Foggy
Великолепно!) вполне себе доработанный продукт)
для усовершенствования можно ещё разве что добавить .content {position: absolute; x-overflow: hidden; y-overflow: auto} и ещё какие-то отступы left, top, bottom и right, чтоб текст внутри блока был читабельным и чтоб внутри блока появлялась вертикальная прокрутка) ну, как у Pegass) но это уже дело каждого, в принципе)
Отличный скрипт)


UPD:
оупс, попробовал вместо con задать $('#mywebcam').html() или $('#cams').html(), вот что получилось при драге:
Показать текст

и ещё я никак не могу понять, почему такого же не происходит у Pegass 🐱‍👤

2615
Сергей @Pegass
ну во первых я делал под библиотеку jquery, во вторых я переделал скрипт вебкамер и у меня он создает эти окошки сам, уже с контентом))

1007
BETEPAH @BETEPAH
Foggy пишет:

для усовершенствования можно ещё разве что добавить .content {position: absolute; x-overflow: hidden; y-overflow: auto} и ещё какие-то отступы left, top, bottom и right, чтоб текст внутри блока был читабельным и чтоб внутри блока появлялась вертикальная прокрутка) ну, как у Pegass) но это уже дело каждого, в принципе)

Да, оформление и декорации - это уж каждый под себя пусть настраивает.

Foggy пишет:

попробовал вместо con задать $('#mywebcam').html() или $('#cams').html(), вот что получилось при драге:
Показать текст

и ещё я никак не могу понять, почему такого же не происходит у Pegass 🐱‍👤

Что-то с оверлеем, похоже. Пока не на чем потестировать, к сожалению.
Вообще, я считаю, что эти изыски с чистым джаваскриптом - скорее гимнастика ума. Думаю, пользователей интернет, для которых подключенные 200 кб библиотек (jQuery, UI, bootstrap, etc) создадут большую нагрузку, сейчас осталось не очень много, а разрабатывать с ними гораздо проще.

P.S. это я намекаю на то, что если уж подключен jquery, то чтоб добавить ему окошко, при подключенном ********** весь приведённый выше код вырождается в одну строку:
$( "#mywebcam" ).dialog();
В ********** можно выбрать только нужное и тогда UI займет что-то около 100 кб, включая изображения.

Отредактировано BETEPAH - 09.10.2012
2615
Сергей @Pegass
Знаете кто вы **********

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

Отредактировано Pegass - 09.10.2012
2970
удалён @Foggy
BETEPAH, модальные окна (да и почти всё из jquery ui) не устраивает меня по дизайну(не в цветах дело), в котором мало что можно безболезненно изменить.

Pegass, оооо, я и не надеялся, что ты это-таки напишешь))) прям порадовал, правда))) с видео отлично работает, проблем с оверлеем нет)

ещё надо в функцию creatModal сунуть вызов функций драг и ресайз, иначе они не срабатывают на новые окна.

сразу вопросы) они мне для самообучения, а не для проверки тебя, если что)))
1. почему ты используешь $(".winminmax").live('click',function() {}); вместо обычного $(".winminmax").click(function() {}); ? это ты просто из другого места взял код и переделывал или в этом есть какой-то смысл, которого я не увидел?
2. почему работают места кода с $('#drugresisehelp').remove() с каждым окном отдельно? ведь по логике id должен быть только один на весь документ и всё применяться должно к первому совпадению.

UPD: ну и ещё вопрос. как отработать даблклик по кнопке сворачивания? проблема в том, что ÷ выделяется.

2615
Сергей @Pegass
Foggy пишет:

BETEPAH, модальные окна (да и почти всё из jquery ui) не устраивает меня по дизайну(не в цветах дело), в котором мало что можно безболезненно изменить.

Pegass, оооо, я и не надеялся, что ты это-таки напишешь))) прям порадовал, правда))) с видео отлично работает, проблем с оверлеем нет)

ещё надо в функцию creatModal сунуть вызов функций драг и ресайз, иначе они не срабатывают на новые окна.

сразу вопросы) они мне для самообучения, а не для проверки тебя, если что)))
1. почему ты используешь $(".winminmax").live('click',function() {}); вместо обычного $(".winminmax").click(function() {}); ? это ты просто из другого места взял код и переделывал или в этом есть какой-то смысл, которого я не увидел?
2. почему работают места кода с $('#drugresisehelp').remove() с каждым окном отдельно? ведь по логике id должен быть только один на весь документ и всё применяться должно к первому совпадению.

UPD: ну и ещё вопрос. как отработать даблклик по кнопке сворачивания? проблема в том, что ÷ выделяется.

1 - live как раз нужен для того чтобы новые окошки работали, тут есть подвох, как же без него)))
вот этот код, нужно изначально кинуть в боди, он как инициализатор этого всего счастья, как ты можешь заметить в песочнице сколько бы окошек ни создал они все работают)))
<div style="display:none;" class="div_rd"><span class="winminmax" ></span><div class="title"></div><div class="content"></div></div>
2 хелпер в документе существует только в момент ресайза или драга, т.е как только ты отпускаешь мышь, он удаляется из DOM

ЗЫ ничего страшного не написал, тема быстро замылится, да и песочница, не для идиотов, помимо всего прочего этот скрипт надо ещё и прикрутить, а у нас маловато админов способных на это))

Отредактировано Pegass - 10.10.2012
2970
удалён @Foggy
нужно изначально кинуть в боди

оу, это я упустил)))
спасибо за ответы на вопросы)
и там ещё последний вопрос был:
UPD: ну и ещё вопрос. как отработать даблклик по кнопке сворачивания? проблема в том, что ÷ выделяется.

2615
Сергей @Pegass
Foggy пишет:

нужно изначально кинуть в боди

оу, это я упустил)))
спасибо за ответы на вопросы)
и там ещё последний вопрос был:
UPD: ну и ещё вопрос. как отработать даблклик по кнопке сворачивания? проблема в том, что ÷ выделяется.


блин, гад, опять я из-за тебя теперь на работе вместо работы над скриптом сидеть буду))) Хотя проще всего заменить на див с инлайн-блок и бекгроундом)))

Отредактировано Pegass - 10.10.2012
1007
BETEPAH @BETEPAH
Pegass пишет:

Foggy пишет:

нужно изначально кинуть в боди

оу, это я упустил)))
спасибо за ответы на вопросы)
и там ещё последний вопрос был:
UPD: ну и ещё вопрос. как отработать даблклик по кнопке сворачивания? проблема в том, что ÷ выделяется.


блин, гад, опять я из-за тебя теперь на работе вместо работы над скриптом сидеть буду))) Хотя проще всего заменить на див с инлайн-блок и бекгроундом)))

Если проблема в том, что кнопка выделяется при даблклике, проще всего онклик заменить на онмаусдаун. Только в этом случае будет срабатывать и на правой кнопке мыши. У меня, собственно, так и сделано.

2970
удалён @Foggy
Попробовал заменить $(".winminmax").live('click',function() на $(".winminmax").live('mousedown',function() ─ не вышло. Пробовал сделать содержимое $(".winminmax").live('click',function() функцией и вызывать её из html по onmousedown, тоже не вышло.
Pegass, мне стыдно даже стало) окей, тогда просто заменю на див) не будем заморачиваться)

2615
2970
удалён @Foggy
Спасибо

2615
Сергей @Pegass
И снова апдейт, теперь таскать, растягивать, сворачивать и закрывать можно только левой кнопкой мыши, а не всеми))) Ссылка та же)))

Помимо раздела JS
Изменился инициирующий блок, тот самый который в боди;
Изменилась функция создания модального окна.

Отредактировано Pegass - 10.10.2012
2970
удалён @Foggy
Переименовал тему, чтобы её проще было поиском найти.

1007
BETEPAH @BETEPAH
На всякий случай оставлю здесь ссылку на **********.

53
artkhvz @artkhvz
Подскажите что не так делаю... исходя их этого кода ********** хочу подключить вывод вещания через модальное окно, проблема окно выводится как надо а видео в нем нет...
вот мои действия:
function createModal() {
var elDiv = document.createElement('div');
elDiv.className = 'drag-window';
document.body.appendChild(elDiv);

elSpn = document.createElement('span');
elDiv.appendChild(elSpn);
elSpn.className = 'title';
elSpn.innerHTML = 'Активная область <span title="закрыть" class="close-button" onmousedown="deleteModal(this.parentNode.parentNode)">&times;</span>';
elSpn.onmousedown = function(event){dragObject(event || window.event, this.parentNode);};

elContent = document.createElement('div');
elDiv.appendChild(elContent);
elContent.className = 'content';
elContent.innerHTML = "<div id=cams><div id=mywebcam style='display:none;'>&nbsp;</div></div>"; - вставил div отвечающий за отображение внутри чата

elResize = document.createElement('div');
elDiv.appendChild(elResize);
elResize.className = 'resizeButton';
elResize.innerHTML = '<img src="http://imgs.su/tmp/2012-10-07/1349554018-492.jpg" alt="" onmousedown="resizeObject(event, this.parentNode.parentNode)" />';
}
function deleteModal(elem) {
elem.parentNode.removeChild(elem);
}

дальше..

/* Включение вебкамер */
if(webcam) {
if(stat2==98) icqst="<a href='#' onclick='createModal(\"webcam"+nick+"\",webcamhost,\""+nick+"\",0); return false;'>"+icqst+"</a>"; - подставил вызов модального окна
if(stat2==99) icqst="<a href=# onclick='parent.hidden.location.href=\"index.php?inc=write&"+ parent.yourkey+"&r="+Math.random()+"&text=/privat "+ nick +": privatcam\";return false;'>"+icqst+"</a>";
if(nick==mynick && loaded) {
if(stat2==98) loadvideo("mywebcam",webcamhost,nick,1);
else if(stat2==99) loadvideo("mywebcam",webcamhost,nick,1,privatcamkey);
else loadvideo("mywebcam","");
}}

Отредактировано artkhvz - 12.11.2012