czy da sie zrobić alert bez tego dzwieku ?

wermon · Post autor: **wermon** » śr sty 21, 2004 12:59 am

...jak wyżej ???

KaRoL · Post autor: **KaRoL** » śr sty 21, 2004 1:05 pm

Oczywiście, ale nie będzie to już okienko systemowe, tylko warstwa w przeglądarce, której możesz nadać dowolny wygląd.
Tutaj masz przykład:

Kod: Zaznacz cały

<html>
<head>
<title>Alert specjalny</title>
<meta name="description" content="Nietypowe okienko dialogowe. 
 Sprytne połączenie CSS i JavaScript">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">

<style type="text/css">
body {background-color:#aaa}

#alertX {
	position:absolute; left:30%; width:40%;
	visibility:hidden; overflow:auto; z-index:400;
	padding:15px;
	background-color:black;
	border:3px solid goldenrod;
	color:#d0d8e0; font:normal bold 12px Verdana,Arial,Tahoma;
	text-align:center;
}
body > #alertX {position:fixed}

#alertX a:link		{text-decoration:none; color:goldenrod}
#alertX a:visited	{text-decoration:none; color:goldenrod}
#alertX a:hover		{text-decoration:underline; color:gold}
</style>

<script type="text/javascript">
function alertX(x){
 if(!x){
  document.getElementById('alertX').style.visibility='hidden'
  return
 }
 with(document.getElementById('alertX')){
  style.height='';innerHTML=x+
  '<hr style="margin-top:20px"><div style="text-align:center">'+
  '<a href="javascript:alertX()">Zamknij</a></div>'
  var y=window.innerHeight?innerHeight:document.body.clientHeight,
  m=y-50
  style.height=offsetHeight>m?m+'px':''
  style.bottom=y/2-offsetHeight/2+'px'
  style.visibility='visible'
 }
}

Tekst1='To jest nietypowe okienko dialogowe'

Tekst2='Zasada jest bardzo prosta.<br>'+
 'Mamy tu do czynienia z warstwą, która jest, '+
 'odpowiednio formatowana za pomocą CSS, '+
 'pokazywana i ukrywana poprzez własność visibility.'

Tekst3='Wywołanie takiego okienka, odbywa się podobnie jak '+
 'w przypadku zwykłego alerta:<br><br>'+
 'alertX(\'Tekst do wyświetlenia\');<br><br>'+
 'Oczywiście, w odróżnieniu od zwykłego alerta, nie '+
 'jest to okno modalne.<br><br>'+
 'Ponieważ mamy tu do czynienia z CSS, możemy dowolnie '+
 'sformatować wygląd poszczególnych elementów takiego okienka. '+
 'Kolor tła, obramowanie, własności czcionki. Jako tło, można '+
 'również użyć grafiki. Można się bawić filtrami '+
 'przezroczystości. Możliwości są nieograniczone.<br><br>'+
 'W przypadku, gdy zawartość takiej warstwy przekracza '+
 'wysokość okna, w okienku pojawia się pasek przewijania.'+
 '<br><br>test<br>test<br>test<br>test<br>test<br>test<br>test'+
 '<br>test<br>test<br>test<br>test<br>test<br>test<br>test'+
 '<br>test<br>test<br>test<br>test<br>test<br>test<br>test'+
 '<br>test<br>test<br>test<br>test<br>test<br>test<br>test'+
 '<br>test<br>test<br>test<br>test<br>test<br>test<br>test'+
 '<br>test<br>test<br>test<br>test<br>test<br>test<br>test'
  
</script>

</head>

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

<p>
<a href="javascript:alertX(Tekst1)">Otwórz pierwsze okienko</a><br>
<a href="javascript:alertX(Tekst2)">Otwórz drugie okienko</a><br>
<a href="javascript:alertX(Tekst3)">Otwórz trzecie okienko</a><br><br>
<a href="javascript:alertX()">Zamknij okienko</a><br>
</p>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>
<a href="javascript:alertX(Tekst1)">Otwórz pierwsze okienko</a><br>
<a href="javascript:alertX(Tekst2)">Otwórz drugie okienko</a><br>
<a href="javascript:alertX(Tekst3)">Otwórz trzecie okienko</a><br><br>
<a href="javascript:alertX()">Zamknij okienko</a><br>
</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="position:absolute;width:130px;right:5px;top:5px;
 font:normal normal 9px verdana">
W przeglądarkach Mozilla i Opera, podczas przewijania
głównego scrollera przegladarki, okienko dialogowe pozostaje
nieruchome.<br>
W przypadku Internet Explorera, jest to niemożliwe, ponieważ
nie obsługuje on własności fixed.
</div>

</body>
</html>

Oczywiście to wygląd całej strony, a nie konkretny fragment, bo sam nie zagłębiam się w ten temat i wolę zademonstrować całość, by czegoś przypadkiem nie wywalić z kodu.

Gość · Post autor: **Gość** » śr sty 21, 2004 4:42 pm

czyli w zwykłym alercie nie da sie zdefiniować dzwieku ?

Krzysztof Aszkiełowicz · śr sty 21, 2004 7:54 pm

Anonymous pisze:czyli w zwykłym alercie nie da sie zdefiniować dzwieku ?

nie

KaRoL · Post autor: **KaRoL** » śr sty 21, 2004 10:05 pm

Ale co za problem? Możesz zrobić warstwę o wyglądzie okienka w Internet Explorer jeśli ci tak bardzo zależy

czy da sie zrobić alert bez tego dzwieku ?

czy da sie zrobić alert bez tego dzwieku ?

Re: czy da sie zrobić alert bez tego dzwieku ?

Re: czy da sie zrobić alert bez tego dzwieku ?

Re: czy da sie zrobić alert bez tego dzwieku ?

Re: czy da sie zrobić alert bez tego dzwieku ?