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

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

1 2 3 ... 7

2615

Сергей @Pegass

07.10.2012

**********

1007

BETEPAH @BETEPAH

07.10.2012

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

08.10.2012

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

1007

BETEPAH @BETEPAH

08.10.2012

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

Показать текст

<!DOCTYPE html><html><head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Перетаскивание и ресайз объектов в HTML средствами JS (Drag & Drop)</title>

<style>

* { 

	margin: 0; 

	padding: 0;

}

body { 

	padding:20px; 

	font:1em helvetica; 

	color: #333;

}

.drag-window { 

	position:absolute; 

	-webkit-box-shadow: 4px 3px 5px rgba(0, 0, 0, 0.5);

	   -moz-box-shadow: 4px 3px 5px rgba(0, 0, 0, 0.5);

	             box-shadow: 4px 3px 5px rgba(0, 0, 0, 0.5);

	background: #dbdbdb; 

	top: 60px; 

	width: 400px; 

	border: 3px double #333;

	z-index:10; 

	overflow: hidden; 

	min-width: 100px; 

	min-height: 100px;

	max-height: 10000px;

}

.drag-window .title { 

	position: relative; 

	display: block; 

	color: white; 

	background: #666; 

	padding: 10px 30px 10px 10px; 

	cursor: move; 

}

.drag-window.modal-active .title { 

	background: #333; 

}

.drag-window .title .close-button, .drag-window .title .min-button {

	position: absolute; 

	right: 10px; 

	top: 5px; 

	color: #aaa; 

	font-weight: bold; 

	cursor: pointer; 

	height: 6px; 

	width: 6px

}

.drag-window .title .close-button:hover, .drag-window .title .min-button:hover {

	color: #777;

}

.drag-window .title .min-button {

	right: 20px; 

}

.drag-window .content {

	padding:15px;

}

.resizeButton { 

	position: absolute; 

	right: 0; 

	bottom: 0; 

	margin-bottom: -4px;

}

.resizeButton img { 

	cursor: se-resize;

}

</style>

<script>

if(document.getElementsByClassName) {

	getElementsByClass = function(classList, node) {    

		return (node || document).getElementsByClassName(classList)

	}

} else {

	getElementsByClass = function(classList, node) {			

		var node = node || document,

		list = node.getElementsByTagName('*'), 

		length = list.length,  

		classArray = classList.split(/\s+/), 

		classes = classArray.length, 

		result = [], i,j

		for(i = 0; i < length; i++) {

			for(j = 0; j < classes; j++)  {

				if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {

					result.push(list[i])

					break

				}

			}

		}

		return result

	}

}

function dragObject(evt, obj) {

	activeModal(obj);

	evt = evt || window.event;

	obj.clicked = true;

	obj.mousePosX = evt.clientX; obj.mousePosY = evt.clientY;

	if( evt.preventDefault ) evt.preventDefault(); else evt.returnValue = false;

	document.onmouseup = function(){ obj.clicked = false }

	document.onmousemove = function( evt ) {

		evt = evt || window.event;

		if( obj.clicked ) {

			posLeft = !obj.style.left ? obj.offsetLeft : parseInt( obj.style.left );

			posTop = !obj.style.top ? obj.offsetTop : parseInt( obj.style.top );

			mousePosX = evt.clientX;

			mousePosY = evt.clientY;

			var newX = posLeft + mousePosX - obj.mousePosX;

			var newY = posTop + mousePosY - obj.mousePosY;

			var newXright = newX + obj.offsetWidth;

			var newYbottom = newY + obj.offsetHeight;

			var scrollHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);

			var scrollWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth);

			newX = newX < 0 ? 0 : newX;

			newY = newY < 0 ? 0 : newY;

			newX = newXright > scrollWidth ? scrollWidth - obj.offsetWidth : newX;

			newY = newYbottom > scrollHeight ? scrollHeight - obj.offsetHeight : newY;

			obj.style.left = newX + 'px';

			obj.style.top = newY + 'px';

			obj.mousePosX = mousePosX;

			obj.mousePosY = mousePosY;

			if(mousePosX < 0 || mousePosY < 0 || mousePosX > scrollWidth || mousePosY > scrollHeight) obj.clicked = false;

			

		}

	}

}



function resizeObject(evt, obj) {

	var scrollHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);

	var scrollWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth);

	var borderH = 0;

	var borderW = 0;

	if (obj.currentStyle) {

		borderH += parseFloat(obj.currentStyle.borderTopWidth) + parseFloat(obj.currentStyle.borderBottomWidth);

		borderW += parseFloat(obj.currentStyle.borderLeftWidth) + parseFloat(obj.currentStyle.borderRightWidth);

	} else if (window.getComputedStyle) {

		borderH += parseFloat(document.defaultView.getComputedStyle(obj,null).borderTopWidth) + parseFloat(document.defaultView.getComputedStyle(obj,null).borderBottomWidth);

		borderW += parseFloat(document.defaultView.getComputedStyle(obj,null).borderLeftWidth) + parseFloat(document.defaultView.getComputedStyle(obj,null).borderRightWidth);

	}

	var posibleW = scrollWidth - obj.offsetLeft - borderW;

	var posibleH = scrollHeight - obj.offsetTop - borderH;

	evt = evt || window.event;

	obj.resize = true;

	obj.mousePosX = evt.clientX; obj.mousePosY = evt.clientY;

	if( evt.preventDefault ) evt.preventDefault(); else evt.returnValue = false;

	document.onmouseup = function(){ obj.resize = false }

	document.onmousemove = function( evt ) {

		evt = evt || window.event;

		if( obj.resize ) {

				objWidth = !obj.style.width ? obj.offsetWidth : parseInt( obj.style.width );

				objHeight = !obj.style.height ? obj.offsetHeight : parseInt( obj.style.height );

				mousePosX = evt.clientX;

				mousePosY = evt.clientY;

				var newW = objWidth + mousePosX - obj.mousePosX;

				var newH = objHeight + mousePosY - obj.mousePosY;

				newW = newW > posibleW ? posibleW : newW;

				newH = newH > posibleH ? posibleH : newH;

				obj.style.width = newW + 'px';

				obj.style.height = newH + 'px';

				obj.mousePosX = mousePosX;

				obj.mousePosY = mousePosY;

				if(mousePosX < 0 || mousePosY < 0 || mousePosX > scrollWidth || mousePosY > scrollHeight) obj.resize = false;

		}

	}

}

function createModal(content, title, noresizable, width, height) {

//значения по умолчанию

	content = content || 'Содержимое окна';

	title = title || 'Заголовок по умолчанию';

	

 	var elDiv = document.createElement('div');

	elDiv.className = 'drag-window';

	if (width) elDiv.style.width = width + 'px';

	if (height) elDiv.style.height = height + 'px';

	elDiv.onmousedown = function(){activeModal(this);};

	document.body.appendChild(elDiv);

	activeModal(elDiv);	

	

	elSpn = document.createElement('span');

	elDiv.appendChild(elSpn); 

	elSpn.className = 'title';

	elSpn.innerHTML = title + ' <span title="свернуть/развернуть" class="min-button" onmousedown="minModal(this.parentNode.parentNode)">÷</span> <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 = content;

	

	if(!noresizable) {

		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);

}

function minModal(elem) {

	var divResize = getElementsByClass('resizeButton', elem)[0];

	var divTitle = getElementsByClass('title', elem)[0];

	if (elem.style.minHeight == '0px') {

		elem.style.maxHeight = '10000px';

		elem.style.minHeight = '100px';

		if(divResize) divResize.style.display = 'block';

	} else {

		elem.style.maxHeight = divTitle.offsetHeight + 'px';

		elem.style.minHeight = '0';

		if(divResize) divResize.style.display = 'none';

	}

}

function classManipulation(e,v,n,c,r){r=e[c='className'].replace(eval('/\\b'+n+'\\b/g'),'');return'has'==v?r!=e[c]:e[c]={add:1,toggle:r==e[c]}[v]?r+' '+n:r}

function activeModal(elem) {

	objs = getElementsByClass('modal-active');

	for (i = 0; i < objs.length; i++) {

		objs[i].style.zIndex = 10;

		classManipulation(objs[i], 'remove', 'modal-active');

	}

	classManipulation(elem, 'add', 'modal-active');

	elem.style.zIndex = 11;

}

</script>

</head>

<body>

<code>

var con = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna <a href="#">aliquam erat</a> volutpat.';<br />

var tit = 'Заголовок';<br />

var noresizbl = false; //false - можно ресайзить, true - нельзя<br />

var wid = 400;<br />

var heig = 300;<br />

</code>

<div id="result"></div>

<script>

var con = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna <a href="#">aliquam erat</a> volutpat.';

var tit = 'Заголовок';

var noresizbl = false; //false - можно ресайзить, true - нельзя

var wid = 400;

var heig = 300;



createModal(con, 'Окно при загрузке документа с длинным заголовком для проверки')

</script>

<p><a href="#" onclick="createModal(con, tit, noresizbl, wid, heig)" >Еще окно <strong>createModal(con, tit, noresizbl, wid, heig)</strong></a></p>

<p><a href="#" onclick="createModal(con, tit, true, wid, heig)" >Нересайзебльное окно <strong>createModal(con, tit, true, wid, heig)</strong></a></p>

<p><a href="#" onclick="createModal(con, tit)" >Окно с неуказанными ширина/высота <strong>createModal(con, tit)</strong></a></p>

<p><a href="#" onclick="createModal(con)" >Окно без заголовка <strong>createModal(con)</strong></a></p>

<p><a href="#" onclick="createModal(con, tit)" >Еще окно <strong>createModal(con, tit)</strong></a></p>

</body>

</html>

2970

удалён @Foggy

09.10.2012

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

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

Показать текст

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

2615

Сергей @Pegass

09.10.2012

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

1007

BETEPAH @BETEPAH

09.10.2012

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

09.10.2012

Знаете кто вы **********

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

Отредактировано Pegass - 09.10.2012

2970

удалён @Foggy

10.10.2012

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

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

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

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

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

2615

Сергей @Pegass

10.10.2012

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

10.10.2012

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

оу, это я упустил)))
спасибо за ответы на вопросы)
и там ещё последний вопрос был:

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

2615

Сергей @Pegass

10.10.2012

Foggy пишет:

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

оу, это я упустил)))
спасибо за ответы на вопросы)
и там ещё последний вопрос был:

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

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

Отредактировано Pegass - 10.10.2012

1007

BETEPAH @BETEPAH

10.10.2012

Pegass пишет:

Foggy пишет:

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

оу, это я упустил)))
спасибо за ответы на вопросы)
и там ещё последний вопрос был:

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

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

2970

удалён @Foggy

10.10.2012

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

2615

Сергей @Pegass

10.10.2012

fixed **********

2970

удалён @Foggy

10.10.2012

Спасибо

2615

Сергей @Pegass

10.10.2012

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

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

Отредактировано Pegass - 10.10.2012

2970

удалён @Foggy

22.10.2012

Переименовал тему, чтобы её проще было поиском найти.

1007

BETEPAH @BETEPAH

25.10.2012

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

artkhvz @artkhvz

12.11.2012

Подскажите что не так делаю... исходя их этого кода ********** хочу подключить вывод вещания через модальное окно, проблема окно выводится как надо а видео в нем нет...
вот мои действия:
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)">×</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;'> </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