Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.08.2012, 20:42
Новичок на форуме
Отправить личное сообщение для Mr_Shad0w Посмотреть профиль Найти все сообщения от Mr_Shad0w
 
Регистрация: 12.07.2012
Сообщений: 5

Проблемы с style.display
Доброго времени суток.
Столкнулся с проблемой при реализации "закрытия" передвигаемого окна-с-сообщением: не получается скрыть дивы с помощью style.display='none'. Собственно, сам код (стили я урезал):
<html>
<head>
<title>Messagebox</title>
<script>
function close_window(){
	document.getElementById('three').style.display="none";
	document.getElementById('four').style.display="none";
	document.getElementById('two').style.display="none";
	}
</script>
<style>
body{
    background:#FFFFFF;
}
#one{
    z-index:1;
    display:none;
    position:fixed;
    height:99%;
    width:99%;
    }
#two{
    position:fixed;
    height:150px;
    width:250px;
	}
#three{
	position:relative;
	width:250px;
	height:25px;
	}
#four{
	position:relative;
        top:-15px;
        height:125px;
	}
</style>
</head>
<body>
<div id="one" onmousemove="document.getElementById('two').style.left=x+(event.pageX-x1)+'px';document.getElementById('two').style.top=y+(event.pageY-y1)+'px'" onmouseup="document.getElementById('one').style.display='none';">
</div>
<div id="two" onmousedown="x=this.offsetLeft;y=this.offsetTop;x1=event.pageX;y1=event.pageY;document.getElementById('one').style.display='inline';">
<div id="three">
<center><p>Window&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="close_window()">X</button></p></center>
</div>
<div id="four">
<p>This is some text</p>
</div>
</div>
</body>
</html>

Пробовал заменить style.display на innerHTML='', но результата никакого. Помогите пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 07.08.2012, 22:24
Новичок на форуме
Отправить личное сообщение для smala Посмотреть профиль Найти все сообщения от smala
 
Регистрация: 17.10.2011
Сообщений: 9

Jquery попробуй, там это гораздо проще реализовать
Ответить с цитированием
  #3 (permalink)  
Старый 07.08.2012, 22:25
Новичок на форуме
Отправить личное сообщение для smala Посмотреть профиль Найти все сообщения от smala
 
Регистрация: 17.10.2011
Сообщений: 9

<center><p>Window&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;<button onclick="close_window()">X</button></p></center>
заменяешь на

<center><p>Window&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button >X</button></p></center>


потом на jquery пишешь код

$('#three button').live('click',function(){
   $('#three,#four,#two').fadeOut();
});

Последний раз редактировалось smala, 07.08.2012 в 22:28.
Ответить с цитированием
  #4 (permalink)  
Старый 07.08.2012, 22:30
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

Mr_Shad0w, если вы уберете onmousedown с элемента two или вынесете элементы three и four то все будет отлично работать...
Ответить с цитированием
  #5 (permalink)  
Старый 07.08.2012, 23:15
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Достаточно кнопку приподнять z-index(om) сделав у неё позицию relative
(*Но вид у контента кривоватый кнешно
<html>
<head>
<title>Messagebox</title>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>

<style>
body{
    background:#FFFFFF;
}
#one{
    border:5px solid red!important;
    z-index:1;
    display:none;
    position:fixed;
    height:99%;
    width:99%;
    }

#two p {
    padding:7px;
}

#two{
    background:#E0E06F;
    border:1px solid red!important;
    position:fixed;
    height:150px;
    width:250px;
	}

#three{
        border:1px solid blue;
	margin:0px;
	position:absolute;
	width:100%;
	height:100%;

	}
#three p{
	text-align:center;
	margin:0px;
	}
#two button{ 
	right:10px;
	top:10px;
	position:absolute;
	z-index:10;
	margin: 0 0 0 0;
	}
#four{
	position:absolute;
        top:55px;
	left:0;
        height:125px;
	}

</style>
<script>
function close_window(){

   document.getElementById('two').style.display="none";
   document.getElementById('three').style.display="none";
   document.getElementById('four').style.display="none";/**/

}

function Drag () {

   document.getElementById('two').style.left=x+(event.pageX-x1)+'px';
   document.getElementById('two').style.top=y+(event.pageY-y1)+'px';

}

function Stop () {

   document.getElementById('one').style.display='none';

}

function twoMousedown (){
   var a = document.getElementById('two');
   x=a.offsetLeft;y=a.offsetTop;
   x1=event.pageX;y1=event.pageY;
   document.getElementById('one').style.display='inline';
}

</script>

</head>
<body>

<div id="one"  onmousemove="Drag()" onmouseup="Stop ()"> </div>



   <div id="two"> <button onclick="close_window()">X</button>

	<div id="four"> 
		<p>This is some text </p>
	</div>

	<div id="three" onmousedown="twoMousedown()">
   		<p>Window&nbsp;    </p>
	</div>

   </div>

</body>
</html>

Последний раз редактировалось Deff, 07.08.2012 в 23:32.
Ответить с цитированием
  #6 (permalink)  
Старый 09.08.2012, 14:09
Новичок на форуме
Отправить личное сообщение для Mr_Shad0w Посмотреть профиль Найти все сообщения от Mr_Shad0w
 
Регистрация: 12.07.2012
Сообщений: 5

Спасибо всем. Поставил на див с id three z-index, перенёс событие onmouseup на элемент two, поменял позиционирование элементов three и four на абсолютное (переписав стили) и всё заработало. Немного подвисает, но для первого тестового окна сойдёт)
<html>
<head>
<title>Messagebox</title>
<script>
function close_window(){
	document.getElementById('three').style.display="none";
	document.getElementById('four').style.display="none";
	document.getElementById('two').style.display="none";
	}
function stop(){
	document.getElementById('one').style.display='none';
	}
</script>
<style>
body{
    background:#FFFFFF;
}
#one{
    z-index:1;
    display:none;
    position:fixed;
    height:99%;
    width:99%;
    }
#two{
    position:fixed;
    height:150px;
    width:250px;
    background: -webkit-linear-gradient(right top, #5D5D5D 10%, #0D0E19 100%);
	background: -moz-linear-gradient(right top, #5D5D5D 10%, #0D0E19 100%);
	background: linear-gradient(right top, #5D5D5D 10%, #0D0E19 100%);
	background: -o-linear-gradient(right top, #5D5D5D 10%, #0D0E19 100%);
	background: -ms-linear-gradient(right top, #5D5D5D 10%, #0D0E19 100%);
	border-radius: 15 15 15 43;
	}
#three{
	position:absolute;
	z-index:10;
	border-radius: 15 15 0 0;
	top:-15px;
	width:100%;
	height:100%;
	}
#four{
	position:absolute;
	background: -webkit-linear-gradient(right top, #5D5D5D 10%, #0D0E19 100%);
	background: -moz-linear-gradient(right top, #5D5D5D 10%, #0D0E19 100%);
	background: linear-gradient(right top, #5D5D5D 10%, #0D0E19 100%);
	background: -o-linear-gradient(right top, #5D5D5D 10%, #0D0E19 100%);
	background: -ms-linear-gradient(right top, #5D5D5D 10%, #0D0E19 100%);
	border: 3px ridge #6A6A6A;
	border-radius: 0 0 15 43;
    top:20px;
    width:244px;
    height:125px;
	}
</style>
</head>
<body>
<div id="one" onmousemove="document.getElementById('two').style.left=x+(event.pageX-x1)+'px';document.getElementById('two').style.top=y+(event.pageY-y1)+'px'" onmouseup="stop()">
</div>
<div id="two" onmouseup="stop()" onmousedown="x=this.offsetLeft;y=this.offsetTop;x1=event.pageX;y1=event.pageY;document.getElementById('one').style.display='inline';">
<div id="three">
<center><p>Window&nbsp;&nbsp; <button style="background:transparent;border: none;" onclick="close_window()">X</button></p></center>
</div>
<div id="four">
<p>This is some text</p>
</div>
</div>
</body>
</html>

Последний раз редактировалось Mr_Shad0w, 09.08.2012 в 14:13.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблемы при установке модулей node.js tadjik1 AJAX и COMET 1 18.03.2012 02:20
Решение проблемы с отображением элементов на странице mozyr Javascript под браузер 17 13.01.2012 02:34
Проблемы с кодировкой в ajax Axenic Общие вопросы Javascript 3 27.07.2010 09:30
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37
Drug&Drop + всплывание события = проблемы =(( _NoName_ Events/DOM/Window 4 05.03.2009 17:47