[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: модальное окно и ИЕ
Форум PHP программистов > JavaScript
quickxyan
22.02.2011 - 11:05
господа, уже не раз писал про модальное окно и всю эту лабуду. з горем пополам сделал его и даже прикрутил к хостцмс. в опере и гугл хроме работает на ура, а вот в 8 ИЕ тупо пропадает верхушка страницы и окно выезжает медленно
http://desizen.ru/


<style>
#main { position: absolute; display: none; top: 0px; left: 0px; background-color: #fff }

#modalbox { width: 200px; height: 320px; border: 1px solid red; position: absolute; background-color: #D3D3D3; display:none; z-index: 2 }

#caption { background-color: red;  color: #D3D3D3; font: 11px verdana; padding: 4px; 

font-weight: bold }

#body { padding: 10px; font: 11px verdana; padding-top: 15px; text-align: center }

#body table { font: 11px verdana }

#body a { color: #FF6600 }
</style>




<body onclick=f(event)>
<input type = "hidden" id = "1" value = "-200">
 <img src = "img1.jpg" id = "qwerty" onclick="ShowModalbox()">
 <img src = "img.jpg">
 <div id="shade"></div>

<?php
echo '

<div id="modalbox" style="filter: alpha(opacity=100)">


<div id="caption" style="filter: alpha(opacity=100)">Форма обратной связи</div>
<div id="body">
<form>
<table>
<tr>
<td align="center"><font color = #696969>* Имя:</font></td>
</tr><tr>
<td colspan="2" align = "center"><input type="text" id="field1" size="18" maxlength="255">
</tr>
<tr>
<td align="center"><font color = #696969>* Телефон:</font></td>
</tr><tr>
<td colspan="2" align = "center"><input type="text" id="field2" size="18" maxlength="255" >
</tr>

<tr>
<td align="center"><font color = #696969>* E-mail:</font></td>
</tr><tr>
<td colspan="2" align = "center"><input type="text" id="field3" size="18" maxlength="255" >
</tr>

<tr>
<td align="center"><font color = #696969>* Сообщение:</font> </td>
</tr><tr>
<td colspan="2" align = "center"><textarea white-space="pre-wrap" word-wrap="break-word" cols = "16" rows = "5" id = "field4"></textarea></td>
</tr>
<tr>
<td>
<img src = "send.jpg" width = "80" onclick = "Send()">

<img src = "clear.jpg" width = "80" onclick = "Clear()">
</td></tr>
</table>
</form>
</div>

</div>';
if (isset($_GET['name']))
{
	$name = $_GET['name'];
	$phone = $_GET['phone'];
	$mail = $_GET['mail'];
	$msg = $_GET['msg'];
		
	$to  = "skident@mail.ru"; 
	$subject = "Обратная связь"; 
	$message = 'имя - '.$name.' номер телефона - '.$phone.' e-mail - '.$mail.' сообщение - '.$msg;
	echo $message;
	$status = mail($to, $subject, $message);
	
}
?>

<div id="main"></div>
</body>




<script>

var modalbox;
var scrollWidth;
var scrollHeight;
var obj1;
var obj2;
var obj3;
var obj4;
var pic;
var qwerty;

window.onload = function() {

	qwerty = document.getElementById("qwerty");
	modalbox = document.getElementById("modalbox");
	
	qwerty.style.position = 'absolute';
	qwerty.style.left = 0 + 'px';
	qwerty.style.top = 120 + 'px';
	qwerty.style.position = "fixed";
	modalbox.style.left = -200 + 'px';
	modalbox.style.top = 0 + 'px';
	
	scrollWidth = document.body.scrollWidth;
	scrollHeight = document.body.scrollHeight;

	document.getElementById("main").style.width = scrollWidth;
	document.getElementById("main").style.height = scrollHeight;

}

function Clear()
{
	obj1 = document.getElementById('field1').value = "";
	obj2 = document.getElementById('field2').value = "";
	obj3 = document.getElementById('field3').value = "";
	obj4 = document.getElementById('field4').value = "";
}

function Send()
{
	obj1 = document.getElementById('field1').value;
	obj2 = document.getElementById('field2').value;
	obj3 = document.getElementById('field3').value;
	obj4 = document.getElementById('field4').value;
	if (obj1 != '' && obj2 != '' && obj3 != '' && obj4 != '')
	{

//document.mailer.action = "mailto:skident@mail.ru";
		//sendmail;\
		s = "?name="+ obj1 + "&phone=" + obj2 + "&mail=" + obj3 + "&msg=" + obj4;
		alert ('Ваше письмо удачно отправлено');
		document.getElementById("field1").value = "";
		document.getElementById("field2").value = "";
		document.getElementById("field3").value = "";
		document.getElementById("field4").value = "";
		HideModalbox();
		window.location.href = "form1.php" + s;
	}
	else
	{
		alert ('Вы не заполнили все поля');
	}
}

// определение клика вне формы//
function f(e)
{
	if (e.target.id == "main") 
	{
		HideModalbox();
	}
}

//Функция отправки
function msg () {
		
document.mailer.action = "mailto:skident@mail.ru"
mailtoandSubject = (('?Subject= Отзыв') +
'&Body= Имя - ' + document.getElementById("field1").value + 
'<br>Телефон - ' + document.getElementById("field2").value +
'<br>e-mail - ' + document.getElementById("field3").value +
'<br>сообщение - ' + document.getElementById("field4").value);
}

////////////////////////////////
function timer(){ 
	var x=document.getElementById("1").value;
	x++;
	x++;
	x++;
	x++;
	x++;
	x++;
	x++;
	x++;
	x++;
	x++;
	
	if(x <= 0)
	{
		setTimeout(timer,1);
		document.getElementById("1").value = x;
		modalbox.style.left = x;
	}
	
} 
function open()
{
	setTimeout(timer, 1);
}

function timer1(){ 
	var x=document.getElementById("1").value;
	x--;
	x--;
	x--;
	x--;
	x--;
	x--;
	x--;
	x--;
	x--;
	x--;
	
	if(x > -211)
	{
		setTimeout(timer1,1);
		document.getElementById("1").value = x;
		modalbox.style.left = x;
	}
	
} function close()
{
	setTimeout(timer1, 1);
}

 

function ShowModalbox() {
	
	modalbox.style.position = 'absolute';
	qwerty.style.position = 'absolute';
	modalbox.style.top = qwerty.style.top;
	open();
	
	document.getElementById("main").style.filter = "alpha(opacity=100)";
	document.getElementById("main").style.opacity = 0;

	modalbox.style.position = "fixed";
	qwerty.style.position = "fixed";

	document.getElementById("main").style.display = "block";
	document.getElementById("main").style.position = "fixed";

	modalbox.style.display = "block";
}

function HideModalbox() {
	close();		
	document.getElementById("main").style.display = "none";
}

</script>




вот функция тамер отвечает за выезд окна 


function timer(){ 
	var x=document.getElementById("1").value;
	x++;
	x++;
	x++;
	x++;
	x++;
	x++;
	x++;
	x++;
	x++;
	x++;
	
	if(x <= 0)
	{
		setTimeout(timer,1);
		document.getElementById("1").value = x;
		modalbox.style.left = x;
	}
	
}



там где х++ это делал скорость, если сделать х+=10 - не работает.

в чем может быть дирка в ИЕ?



Спустя 5 минут, 5 секунд (22.02.2011 - 10:10) Snus написал(а):
quickxyan
WTF?! :blink: 
	x++;
	x++;
	x++;
	x++;
	x++;
	x++;
	x++;
	x++;
	x++;
	x++;

Спустя 3 минуты, 54 секунды (22.02.2011 - 10:14) quickxyan написал(а):
я ж написал выше, что это такой дурацкий выезд окна) сам поражаюсь, но у меня только так работает(

Спустя 1 час, 27 минут, 13 секунд (22.02.2011 - 11:41) Ser18 написал(а):
Может из-за того что у вас <td> не закрыт

<tr>
      <td colspan="2" align = "center"><input type="text" id="field1" size="18" maxlength="255">
</tr>

Спустя 11 минут, 33 секунды (22.02.2011 - 11:52) quickxyan написал(а):
огромное спасибо - не заметил что забыл позакрывать.

но походу не только это, сейчас буду в проходить код, строка за строкой может, что найду.

Спустя 15 минут, 22 секунды (22.02.2011 - 12:08) nugle написал(а):
вот сюда загляни закинь ссылку со своего сайта и проверь
http://validator.w3.org/

Спустя 11 минут, 9 секунд (22.02.2011 - 12:19) quickxyan написал(а):
спасибо, скинул скрипт на бесплатном хосте, что бы пока что без цмс проверить. так 18 ошибок и 11 варнингов.

Спустя 6 минут, 9 секунд (22.02.2011 - 12:25) quickxyan написал(а):
http://validator.w3.org/check?uri=http%3A%...eparse_warnings

кто, что может посоветовать судя по ошибкам) я так понял там в основном ошибки из-за неправильного оформления doctype !?

Спустя 7 часов, 19 минут, 46 секунд (22.02.2011 - 19:45) inpost написал(а):
quickxyan
position:absolute ставится внутри блока: position:relative, а его я у тебя не заметил. + он старается уместиться именно в нём.

Спустя 10 минут, 17 секунд (22.02.2011 - 19:55) quickxyan написал(а):
не совсем понял, то есть совсем непонял)

этот блок релатив пишется в <style> ? можно пример пожалуста?

Спустя 15 минут, 4 секунды (22.02.2011 - 20:10) inpost написал(а):
<div style="width:1000px;height:500px;position:relative">
  <div style="position:absolute;width:100px;height:100px;background-color:red;left:0;top:0">
    ВНУТРЕННИЙ БЛОК
  </div>
</div>

Спустя 2 дня, 20 часов, 35 минут, 57 секунд (25.02.2011 - 16:46) quickxyan написал(а):
неясно зачем там релатив??? ?я немного переделал скрипт, но все равно в ИЕ работает очень и очень коряво. 



<STYLE type="text/css">
#main {  position: absolute; display: none; top: 0px; left: 0px; background-color: #fff }
#modalbox { width: 200px; height: 320px; top: 0px; left: -200px;  border: 1px solid red; position: absolute; background-color: #D3D3D3; display:none; z-index: 2 }
#caption { background-color: red;  color: #D3D3D3; font: 11px verdana; padding: 4px; font-weight: bold }
#body { padding: 10px; font: 11px verdana; padding-top: 15px; text-align: center }
#body table { font: 11px verdana }
#body a { color: #FF6600 }
#fon { color: #696969 } 
</STYLE>

<BODY onclick=f(event)>
 <input type = "hidden" id = "1" value = "-200">
 <img src = "img1.jpg" id = "qwerty" onclick="ShowModalbox()">

<div id="modalbox" style="filter: alpha(opacity=100)">
<div id="caption" style="filter: alpha(opacity=100)">Форма обратной связи</div>
	<div id="body">
	<form>
	<table>
		<tr>
			<td align="center" id = "fon">* Имя:</td>
		</tr><tr>
			<td colspan="2" align = "center"><input type="text" id="field1" size="18" maxlength="255"></td>
		</tr><tr>
			<td align="center" id = "fon">* Телефон:</td>
		</tr><tr>
			<td colspan="2" align = "center"><input type="text" id="field2" size="18" maxlength="255" ></td>
		</tr><tr>
			<td align="center" id = "fon">* E-mail:</td>
		</tr><tr>
			<td colspan="2" align = "center"><input type="text" id="field3" size="18" maxlength="255" ></td>
		</tr><tr>
			<td align="center" id = "fon">* Сообщение:</td>
		</tr><tr>
			<td colspan="2" align = "center"><textarea cols = "16" rows = "5" id = "field4"></textarea></td>
		</tr><tr>
			<td>
			<img src = "send.jpg" width = "80" onclick = "Send()">
			<img src = "clear.jpg" width = "80" onclick = "Clear()">
			</td>
		</tr>
	</table>
	</form>
	</div>
</div>
<div id="main"></div>
</BODY>

<?php
if (isset($_GET['name']))
{
	$name = $_GET['name'];
	$phone = $_GET['phone'];
	$mail = $_GET['mail'];
	$msg = $_GET['msg'];
		
	$to  = "skident@mail.ru"; 
	$subject = "Обратная связь"; 
	$message = 'имя - '.$name.'\n номер телефона - '.$phone.'\n e-mail - '.$mail.'\n сообщение - '.$msg;
	$status = mail($to, $subject, $message);
}
?>

<script language = "JavaScript">
var modalbox;
var qwerty;
var obj1;
var obj2;
var obj3;
var obj4;
var coord;

window.onload = function() {
	qwerty = document.getElementById("qwerty");
	modalbox = document.getElementById("modalbox");
	coord=document.getElementById("1");
	
	qwerty.style. position = 'absolute';
	qwerty.style.left = 0 + 'px';
	qwerty.style.top = 120 + 'px';
	qwerty.style.position = "fixed";
	
	document.getElementById("main").style.width = document.body.scrollWidth;
	document.getElementById("main").style.height = document.body.scrollHeight;
}

function ShowModalbox() {
	modalbox.style.position = 'absolute';
	qwerty.style.position = 'absolute';
	modalbox.style.top = qwerty.style.top;
	setTimeout(timer_show, 1);

	document.getElementById("main").style.opacity = 0;

	modalbox.style.position = "fixed";
	qwerty.style.position = "fixed";

	document.getElementById("main").style.display = "block";
	document.getElementById("main").style.position = "fixed";

	modalbox.style.display = "block";
}

function HideModalbox() {
	setTimeout(timer_hide, 1);
	document.getElementById("main").style.display = "none";
}

function Clear(){
	obj1 = document.getElementById('field1').value = "";
	obj2 = document.getElementById('field2').value = "";
	obj3 = document.getElementById('field3').value = "";
	obj4 = document.getElementById('field4').value = "";
}

function Send(){
	obj1 = document.getElementById('field1').value;
	obj2 = document.getElementById('field2').value;
	obj3 = document.getElementById('field3').value;
	obj4 = document.getElementById('field4').value;
	if (obj1 != '' && obj2 != '' && obj3 != '' && obj4 != '')
	{
		s = "?name="+ obj1 + "&phone=" + obj2 + "&mail=" + obj3 + "&msg=" + obj4;
		alert ('Ваше письмо удачно отправлено');
		document.getElementById("field1").value = "";
		document.getElementById("field2").value = "";
		document.getElementById("field3").value = "";
		document.getElementById("field4").value = "";
		HideModalbox();
		window.location.href = "form1.php" + s;
	}
	else alert ('Вы не заполнили все поля');
}

// определение клика вне формы//
function f(e){
	if (e.target.id == "main") 
		HideModalbox();
}

function timer_show(){ 
	x = coord.value;
	for(i = 0; i < 10; i++)
	 x++;
	if(x <= 0)
	{
		setTimeout(timer_show,1);
		coord.value = x;
		modalbox.style.left = x;
	}
} 

function timer_hide(){ 
	x = coord.value;
	
	
	for(i = 0; i < 10; i++)
	 x--;
	
	if(x > -212)
	{
		setTimeout(timer_hide,1);
		coord.value = x;
		modalbox.style.left = x;
	}
	
} 

</script>


почему тут картинка при клике на которую вылазит модальное окно не стает на топ=200(в ИЕ)

Спустя 23 минуты, 59 секунд (25.02.2011 - 17:10) inpost написал(а):
У тебя точно написано там: 200+"px" ?

Спустя 3 часа, 5 минут, 9 секунд (25.02.2011 - 20:15) quickxyan написал(а):
та вроде да! я вот выяснил методом тыка, что в ИЕ толи неподдержывается толи у меня неправильно работает свойство position:fixed

кто с таким сталкивался? мож я гду то туплю???


<style>
#mod {z-index: 2}
#main {  position: absolute; display: none; top: 0px; left: 0px; background-color: red }
</style>

<body>
<img src = "img.jpg">
<div id="mod"><img src = "img1.jpg" id="1" onclick="func()"></div>
<div id="main" onclick = "hide()"></div>

</body>

<script>
var x = document.getElementById("1");
	x.style.position = "absolute";
	x.style.top = "100";
	x.style.position = "fixed";
	document.getElementById("main").style.width = 200;
	document.getElementById("main").style.height = 200;

function func(){
document.getElementById("main").style.display = "block";
document.getElementById("main").style.position = "fixed";
}

function hide(){
document.getElementById("main").style.display = "none";
}

</script>

Спустя 3 часа, 15 минут, 34 секунды (25.02.2011 - 23:31) inpost написал(а):
quickxyan
А зачем делать абсолютный и сразу же fixed?

Спустя 1 час, 35 минут, 46 секунд (26.02.2011 - 01:07) Ser18 написал(а):
После появления этого окна если нажать клавишу F5 оно перестает появляться (Firefox 3.6.13)


_____________
печатаю со скоростью 320 минут в знак...

плюсуем карму не стесняемся
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.