Показване на прозорец

Dizasterr · 28 Февруари 2010

Здравейте! С jQuery си направих един прозорец, който да се показва при натискане с мишката. Някой знае ли как ще стане този прозорец да излиза над всички ? Ето кода, който написах:

Код:

<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script>
 $(document).ready(function(){
	$("#window").hide();
	});
	
	function show() {
	$("#window").fadeIn(2000);
	}
</script>
<style type="text/css">
#window {
	width: 300px;
	height: 300px;
	background-color: #FFF;
}
</style>
<a href="#" onclick="show()">Покажи</a>
<div id="window">
Popup
</style>

Благодаря предварително! :?:

Wherever · 28 Февруари 2010

z-index: 99999;

ако съм те разбрал

виж и position: absolute;

Dizasterr · 28 Февруари 2010

Wherever каза:
z-index: 99999;

ако съм те разбрал

виж и position: absolute;

Благодаря! А има ли начин отзад да затъмня малко останалата част от сайта ?

dELux_nike · 28 Февруари 2010

http://web-tourist.net/forum/viewtopic.php?t=68494&highlight=%E7%E0%F2%FA%EC%ED%FF%E2%E0%ED%E5

Dizasterr · 28 Февруари 2010

dELux_nike каза:
http://web-tourist.net/forum/viewtopic.php?t=68494&highlight=%E7%E0%F2%FA%EC%ED%FF%E2%E0%ED%E5

Направих го с fadeTo, но единият див не става по - прозрачен.

Liberate · 28 Февруари 2010

казвай кой!

дай код!

Dizasterr · 28 Февруари 2010

Код:

<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script>
 $(document).ready(function(){
	$("#header").hide();
	$("#header").fadeIn(2000);
	$("#main").hide();
	$("#main").fadeIn(1000);
	$("#window").hide();
	});
	
	function show() {
	$("#header").fadeTo("slow", 0.20);
	$("#main").fadeTo("slow", 0.20);
	$("#window").fadeIn(2000);
	$("#main").fadeTo("slow", 1.00);
	};
</script>
<style type="text/css">
#window {
	width: 600px;
	height: 500px;
	background: url("images/main.png");
	position: absolute;
	z-index: 99999;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 left: 0;
	 margin: auto;
}
#user {
	width: 140px;
	height: 20px;
	background: url("images/user.png");
	-moz-border-radius: 2px;
	border: 0px;
	color: #fff;
}
<a href="#" onclick="show()">Покажи</a>
<div id="window" align="center">
AAAAAAAAAAAA
</div>

Целият сайт е в един див с име main.

Dizasterr · 28 Февруари 2010

Някой има ли идея ?

Liberate · 28 Февруари 2010

аа може ли и да споделиш кой див не се затъмнява?

Dizasterr · 28 Февруари 2010

Самият див е голям поради наличието на php кодове. Но ето началото:

Код:

<div id="main">
<div id="header">
</div>
<table id="tablemenu" align="center">
<tr align="center">
<td id="button" style="opacity:0.70;filter:alpha(opacity=70)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.70;this.filters.alpha.opacity=70"><a href="#">Начало</a></td>
</tr>
</table>

<br/><br/><br/>
<div id="stripe">
<a href='javascript:;' onclick="window.open('Pages/reg.php', '', 'width=800, height=600');">Регистрирай се безплатно от ТУК.</a>
</div>
<table width="800px" height="715px" border="0">
<tr align="center">
<td width="200px">

</div>

И да попитам започнах да кодирам един файл, но като сложа елементите в главния див и немогат да се използват. Бутона на формата неможе да се натиска. Ето кода:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>.: Kingdom Fights :.</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="author" content="Константин Рачев" />
<meta http-equiv="content-language" content="bg" />  
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../jquery-1.3.2.js" type="text/javascript"></script>
<script>
	$(document).ready(function() {
	$("#main").fadeIn(2000);
	});
	
	function show() {
	$("#main").fadeTo("slow", 0.50);
	$("#window").fadeIn(2000);
	
	};
</script>
<style type="text/css">
#window {
	width: 600px;
	height: 500px;
	background: url("images/main.png");
	position: absolute;
	z-index: 99999;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 left: 0;
	 margin: auto;
}
#user {
	width: 140px;
	height: 20px;
	background: url("images/user.png");
	-moz-border-radius: 2px;
	border: 0px;
	color: #fff;
}
</style>
</head>
<body>
<br/><br/><br/>
<div id="main">
<br/><br/><br/>
<td width="400px" valign="top">
<a href="#" onclick="show()">Покажи</a>
<div id="window" align="center">
AAAAAAAAAAAA
</div>
<b>TEXT</b>
<form id="loginForm" method="post" action="">
<table width="50" border="0" cellspacing="0" cellpadding="0" align="center">
<tr height="30px">
<td width="140" align="right" ></td>
<td width="57"></td>
<td><img src="images/loguser.png" width="20px" height="20px"></td>
<td><input type="text" name="user" id="user" value="Потребител" onfocus="this.value=''" onfocus="if(this.value == Потребител) { this.value=''}" onblur="if(this.value == '') { this.value='Потребител' }"  style="opacity:0.6;filter:alpha(opacity=60)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60"/></td>
<td align="right"></td>
<td> </td>
<td><img src="images/logpass.png" width="20px" height="20px"></td>
<td><input type="password" name="password" id="pass" value="парола" onfocus="this.value=''" onfocus="if(this.value == Парола) { this.value=''}" onblur="if(this.value == '') { this.value='Парола' }" style="opacity:0.6;filter:alpha(opacity=60)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60"/></td>
<td align="right"></td>
<td> </td>
<td height="35"><input type="submit" name="submitbutton" id="login" value="Влез" style="opacity:0.8;filter:alpha(opacity=80)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" /></td>
</tr>
</table>

</div>

</body>
</html>

Ето и стиловете:

Код:

a:link {
	color: #ffffff;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: #ffffff;
}

body {
	background: url("../images/design.jpg");
	font-family: 15px Comic Sans MS, Arial, serif;
	color: #FFF;
	margin:0 auto;
} 
	

#main {
	width: 750px;
	height: 500px;
	background: url("main.png");
	-moz-border-radius: 5px;
	opacity:0.85;
	filter:alpha(opacity=85);
	margin:0 auto;
	text-align: center;
}
	
#header {
	width: 800px;
	height: 150px;
	background: url("../images/header.gif");
	-moz-border-radius: 3px;
}

Liberate · 28 Февруари 2010

добре стана сложничко не може ли просто да дадеш страницата да проверя на място щот така ше отнеме години :?

Dizasterr · 28 Февруари 2010

Код:

<?php 
ob_start();
session_start();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="author" content="" />
<meta http-equiv="content-language" content="bg" />  
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script>
 $(document).ready(function(){
	$("#header").hide();
	$("#header").fadeIn(2000);
	$("#main").hide();
	$("#main").fadeIn(1000);
	$("#window").hide();
	});
	
	function show() {
	$("#header").fadeTo("slow", 0.20);
	$("#window").fadeIn(2000);
	$("#main").fadeTo("slow", 0.20);
	};
	
	function close() {
	$("#header").fadeTo("slow", 1.00);
	$("#main").fadeTo("slow", 1.00);
	$("#window").hide();
	};
</script>
<style type="text/css">
#window {
	width: 600px;
	height: 500px;
	background: url("images/main.png");
	position: absolute;
	z-index: 99999;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 left: 0;
	 margin: auto;
}
#user {
	width: 140px;
	height: 20px;
	background: url("images/user.png");
	-moz-border-radius: 2px;
	border: 0px;
	color: #fff;
}

#pass {
	width: 140px;
	height: 20px;
	background: url("images/user.png");
	-moz-border-radius: 2px;
	border: 0px;
	color: #fff;
}

#login {
	width: 100px;
	height: 20px;
	background: url("images/user.png");
	-moz-border-radius: 2px;
	border: 0px;
	color: #fff;
}

#pic {
	width: 200px;
	height: 180px;
	background: url("images/sticker.gif");
	-moz-border-radius: 2px;
	border: 0px;
	color: #fff;
	float: left;
}
</style>
</head>
<body>
<center>
<div id="main">
<div id="header">
</div>
<table id="tablemenu" align="center">
<tr align="center">
<td id="button" style="opacity:0.70;filter:alpha(opacity=70)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.70;this.filters.alpha.opacity=70"><a href="#">Начало</a></td>
<td id="button" style="opacity:0.70;filter:alpha(opacity=70)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.70;this.filters.alpha.opacity=70"><a href="Pages/demo.php">Снимки</a></td>
<td id="button" style="opacity:0.70;filter:alpha(opacity=70)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.70;this.filters.alpha.opacity=70"><a href="Pages/help.php">Помощ</a></td>
<td id="button" style="opacity:0.70;filter:alpha(opacity=70)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.70;this.filters.alpha.opacity=70"><a href="Pages/rules.php">Правила</a></td>
<td id="button" style="opacity:0.70;filter:alpha(opacity=70)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.70;this.filters.alpha.opacity=70"><a href="Pages/contacts.php">Контакти</a></td>
<td id="button" style="opacity:0.90;filter:alpha(opacity=90)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.90;this.filters.alpha.opacity=90"><a href="Pages/comments.php">Коментари</a></td>
</tr>
</table>

<br/><br/><br/>
<div id="stripe">
<a href='javascript:;' onclick="window.open('Pages/reg.php', '', 'width=800, height=600');">Регистрирай се безплатно от ТУК.</a>
</div>
<table width="800px" height="715px" border="0">
<tr align="center">
<td width="200px">
<?php
?>
</div>
</td>
<center>
<td width="400px" valign="top">
<a href="#" onclick="show()">Покажи</a>
<div id="window" align="center">
AAAAAAAAAAAA
</div>
<img src="images/exit.png" width="20px" height="20px" onclick="close()" />
</center>
<form id="loginForm" method="post" action="">
<table width="50" border="0" cellspacing="0" cellpadding="0" align="center">
<tr height="30px">
<td width="140" align="right" ></td>
<td width="57"></td>
<td><img src="images/loguser.png" width="20px" height="20px"></td>
<td><input type="text" name="user" id="user" value="Потребител" onfocus="this.value=''" onfocus="if(this.value == Потребител) { this.value=''}" onblur="if(this.value == '') { this.value='Потребител' }"  style="opacity:0.6;filter:alpha(opacity=60)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60"/></td>
<td align="right"></td>
<td> </td>
<td><img src="images/logpass.png" width="20px" height="20px"></td>
<td><input type="password" name="password" id="pass" value="парола" onfocus="this.value=''" onfocus="if(this.value == Парола) { this.value=''}" onblur="if(this.value == '') { this.value='Парола' }" style="opacity:0.6;filter:alpha(opacity=60)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60"/></td>
<td align="right"></td>
<td> </td>
<td height="35"><input type="submit" name="submitbutton" id="login" value="Влез" style="opacity:0.8;filter:alpha(opacity=80)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" /></td>
</tr>
</table>
</form>
<a href="Pages/lostpassword.php">Забравена парола</a><br/><br/><br/>
<img src="images/medal1.png" width="100px" height="100px" />
<img src="images/medal2.png" width="100px" height="100px" />
<img src="images/medal3.png" width="100px" height="100px" />
<br/><br/><br/>
<b></b>
<br/><br/><br/><br/><br/><br/><br/><br/>
<div id="user">Реклама</div><br/>
<table border="0" width="468px" height="60px">
<tr>
<td align="center">
468 x 60
</td>
</tr>
</table>
</td>
<td width="200px">
<?php
?>
</td>
</tr>
</table>
<br/><br/>
<div id="footer">
</div>
</div>
</div>
<br/><br/><br/>
</center>
</body>
</html>

Liberate · 28 Февруари 2010

оф братле имах предвид дай линк

така с тоя код хептен не мога да налучкам къв е проблема...

Dizasterr · 28 Февруари 2010

Така това отзад се изсветлява, а може ли то да става по - черно ? Все едно са заляти със черен цвят ?

Liberate · 28 Февруари 2010

Dizasterr каза:
Така това отзад се изсветлява, а може ли то да става по - черно ? Все едно са заляти със черен цвят ?

Код:

   function show() { 
   $("#header").fadeTo("slow", 0.20); 
   $("#window").fadeIn(2000); 
   $("#main").fadeTo("slow", 0.20); 
   }; 
    
   function close() { 
   $("#header").fadeTo("slow", 1.00); 
   $("#main").fadeTo("slow", 1.00); 
   $("#window").hide(); 
   };

променяй си стойностите след slow

Dizasterr · 28 Февруари 2010

Liberate каза:
Dizasterr каза:

Така това отзад се изсветлява, а може ли то да става по - черно ? Все едно са заляти със черен цвят ?

Увеличете...

Код:

function show() { $("#header").fadeTo("slow", 0.20); $("#window").fadeIn(2000); $("#main").fadeTo("slow", 0.20); }; function close() { $("#header").fadeTo("slow", 1.00); $("#main").fadeTo("slow", 1.00); $("#window").hide(); };

променяй си стойностите след slow

Оправих се! Мерси за идеята за фона - направих си го. Благодаря на всички +1 за Liberate.

Показване на прозорец

Dizasterr

Registered

Wherever

Registered

Dizasterr

Registered

dELux_nike

Registered

Dizasterr

Registered

Liberate

Registered

Dizasterr

Registered

Dizasterr

Registered

Liberate

Registered

Dizasterr

Registered

Liberate

Registered

Dizasterr

Registered

Liberate

Registered

Dizasterr

Registered

Liberate

Registered

Dizasterr

Registered