Форум

Mr_Shad0w · #1 (**permalink**) 07.08.2012, 20:42

Доброго времени суток.
Столкнулся с проблемой при реализации "закрытия" передвигаемого окна-с-сообщением: не получается скрыть дивы с помощью 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='', но результата никакого. Помогите пожалуйста.

smala · #2 (**permalink**) 07.08.2012, 22:24

Jquery попробуй, там это гораздо проще реализовать

smala · #3 (**permalink**) 07.08.2012, 22:25

<center><p>Window     &nb sp;  <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();
});

lord2kim · #4 (**permalink**) 07.08.2012, 22:30

Mr_Shad0w, если вы уберете onmousedown с элемента two или вынесете элементы three и four то все будет отлично работать...

Deff · #5 (**permalink**) 07.08.2012, 23:15

Достаточно кнопку приподнять 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>

Mr_Shad0w · #6 (**permalink**) 09.08.2012, 14:09

Спасибо всем. Поставил на див с 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>

Форум

Справочник

Discord чат

Курсы javascript