Показване/скриване на прозорче

R

rosko

Registered
Здравейте!
Искам да попитам как става номера с скриване/показване на прозорче, като например в някой сайтове има блокчета отстрани, дали за потребителската информация или нещо друго, отгоре като се цъкне на надписа или на хедърчето на прозорчето то се скрива и обратното!
:idea: +1
edit: Не точно как става, ами примерен код ако може да дадете..
 
Код: 
		<style type="text/css">
.alert {
	background: #fff6bf center no-repeat;
	background-position: 15px 50%; /* x-pos y-pos */
	text-align: left;
	padding: 3px 3px 3px 10px;
	border-top: 2px solid #ffd324;
	border-bottom: 2px solid #ffd324;
	margin-top:2px;
	margin-bottom:0px;
	}
</style>
		<link type="text/css" href="http://grozde.com/in/css/ui-darkness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="http://grozde.com/in/js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="http://grozde.com/in/js/jquery-ui-1.7.1.custom.min.js"></script>

		<script type="text/javascript">
			$(function(){

				// Accordion
				$("#accordion").accordion({ header: "h3" });
	
				// Tabs
				$('#tabs').tabs();
	

				// Dialog			
				$('#dialog').dialog({
					autoOpen: true,
					width: 600,
					buttons: {
						"Гласувай": function() { 
							$(this).dialog("close"); 
							window.open("http://bgtop.net/in.php/1204351550");
					        return false;
						}, 
						"Затвори": function() { 
							$(this).dialog("close");
							
						} 
					}
				});
				
				// Dialog Link
				$('#dialog_link').click(function(){
					$('#dialog').dialog('open');
					return false;
				});

				// Datepicker
				$('#datepicker').datepicker({
					inline: true
				});
				
				// Slider
				$('#slider').slider({
					range: true,
					values: [17, 67]
				});
				
				// Progressbar
				$("#progressbar").progressbar({
					value: 20 
				});
				
				//hover states on the static widgets
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); }, 
					function() { $(this).removeClass('ui-state-hover'); }
				);
				
			});
		</script>
И добавяш в кода някъде

Код: 
		<div id="dialog" title="Покажи уе">
			<p>Покажи или скрии?</p>
 
Код: 
<script>
 function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
	  
		document.getElementById('commentlink').style.display = 'none';
			
    }else{
      document.getElementById(divid).style.display = 'none';
    }
  }
</script>



<div class="diva" style="border: solid 1px black;"> teasdsa dsa sad asjsdlfsd fsj hdsjfh dsaj hdskjfh sdjk sd <br><br>sad</div>


<br>
<a href="#" onClick="toggleDiv('diva');"> Skrii / pokaji </a>
 
KlaXeN каза:
Код: 
		<style type="text/css">
.alert {
	background: #fff6bf center no-repeat;
	background-position: 15px 50%; /* x-pos y-pos */
	text-align: left;
	padding: 3px 3px 3px 10px;
	border-top: 2px solid #ffd324;
	border-bottom: 2px solid #ffd324;
	margin-top:2px;
	margin-bottom:0px;
	}
</style>
		<link type="text/css" href="http://grozde.com/in/css/ui-darkness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="http://grozde.com/in/js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="http://grozde.com/in/js/jquery-ui-1.7.1.custom.min.js"></script>

		<script type="text/javascript">
			$(function(){

				// Accordion
				$("#accordion").accordion({ header: "h3" });
	
				// Tabs
				$('#tabs').tabs();
	

				// Dialog			
				$('#dialog').dialog({
					autoOpen: true,
					width: 600,
					buttons: {
						"Гласувай": function() { 
							$(this).dialog("close"); 
							window.open("http://bgtop.net/in.php/1204351550");
					        return false;
						}, 
						"Затвори": function() { 
							$(this).dialog("close");
							
						} 
					}
				});
				
				// Dialog Link
				$('#dialog_link').click(function(){
					$('#dialog').dialog('open');
					return false;
				});

				// Datepicker
				$('#datepicker').datepicker({
					inline: true
				});
				
				// Slider
				$('#slider').slider({
					range: true,
					values: [17, 67]
				});
				
				// Progressbar
				$("#progressbar").progressbar({
					value: 20 
				});
				
				//hover states on the static widgets
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); }, 
					function() { $(this).removeClass('ui-state-hover'); }
				);
				
			});
		</script>
И добавяш в кода някъде

Код: 
		<div id="dialog" title="Покажи уе">
			<p>Покажи или скрии?</p>
Увеличете...
Това е съвсем друго, аз не сиакм попъп, а такова дето ми е дал vik96, ама неговото не иска да работи :sad:
 
Код: 
<html>
<head>
<script>
 function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
	  
		document.getElementById('commentlink').style.display = 'none';
			
    }else{
      document.getElementById(divid).style.display = 'none';
    }
  }
</script>
</head>
<body>
<a href="javascript:void(null)" onClick="toggleDiv('div');">Open/close</a>

<div id="div" style=" display: none;"> Div Div DIv Dsadsa sa jdsalkdj sak jdsak djsakdj sakjdsa ksa d</div>
</body>
 
vik96 каза:
Код: 
<html>
<head>
<script>
 function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
	  
		document.getElementById('commentlink').style.display = 'none';
			
    }else{
      document.getElementById(divid).style.display = 'none';
    }
  }
</script>
</head>
<body>
<a href="javascript:void(null)" 'div');">Open/close</a>

<div id="div" style=" display: none;"> Div Div DIv Dsadsa sa jdsalkdj sak jdsak djsakdj sakjdsa ksa d</div>
</body>
Увеличете...
Пак не!
Просто си цъъъкам ама няма ефект!
 
Код: 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script language="javascript">
  function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
    }else{
      document.getElementById(divid).style.display = 'none';
    }
  }
</script>
<div id="mydiv" style="display:none"><h3>Тест тест тест тест<br>Тест2 Тест2 Тест3</h3></div>
<a href="javascript:;" onmousedown="toggleDiv('mydiv');">Натисни ме..</a>

demo -> http://dmz.scriptx.info/box/
 
rosko каза:
vik96 каза:
Код: 
<html>
<head>
<script>
 function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
	  
		document.getElementById('commentlink').style.display = 'none';
			
    }else{
      document.getElementById(divid).style.display = 'none';
    }
  }
</script>
</head>
<body>
<a href="javascript:void(null)" 'div');">Open/close</a>

<div id="div" style=" display: none;"> Div Div DIv Dsadsa sa jdsalkdj sak jdsak djsakdj sakjdsa ksa d</div>
</body>
Увеличете...
Пак не!
Просто си цъъъкам ама няма ефект!
Увеличете...
Тествах го и работи !
 
vik96 каза:
rosko каза:
vik96 каза:
Код: 
<html>
<head>
<script>
 function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
	  
		document.getElementById('commentlink').style.display = 'none';
			
    }else{
      document.getElementById(divid).style.display = 'none';
    }
  }
</script>
</head>
<body>
<a href="javascript:void(null)" 'div');">Open/close</a>

<div id="div" style=" display: none;"> Div Div DIv Dsadsa sa jdsalkdj sak jdsak djsakdj sakjdsa ksa d</div>
</body>
Увеличете...
Пак не!
Просто си цъъъкам ама няма ефект!
Увеличете...
Тествах го и работи !
Увеличете...

Виж, наистина може да се обидиш, но просто го тествах и на .html разширение и на .php, но не даде ефект!
Затова давам +1 на devent!
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе