Проблемы с 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 <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='', но результата никакого. Помогите пожалуйста. |
Jquery попробуй, там это гораздо проще реализовать
|
<center><p>Window &nb sp; <button onclick="close_window()">X</button></p></center>
заменяешь на <center><p>Window <button >X</button></p></center> потом на jquery пишешь код
$('#three button').live('click',function(){
$('#three,#four,#two').fadeOut();
});
|
Mr_Shad0w, если вы уберете onmousedown с элемента two или вынесете элементы three и four то все будет отлично работать...
|
:) Достаточно кнопку приподнять 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 </p>
</div>
</div>
</body>
</html>
|
Спасибо всем. Поставил на див с 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 <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>
|
| Часовой пояс GMT +3, время: 00:58. |