Модальное окно, jQuery, top.

1. fhgdfhdfhdf (12.09.2012 / 16:48)
Как сделать чтобы модальное окно всегда было привязано к верху окна браузера а не к верху самой страницы, а то получается так что открываешь картинку где-то в низу страницы и листаешь в верх что бы ее посмотреть.

Добавлено через 01:45 сек.

$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);

Вот вместо этих формул нужно что то другое, или совсем другим способом.

2. fhgdfhdfhdf (12.09.2012 / 16:50)
JS окон:

<script type="text/javascript">
    $(document).ready(function() {
$("#body").append('<div id="boxes"><div id="dialog" class="window"><div id="bboodd"><div id="header" class="cf"></div><div id="main" class="cf"><div id="content-2"><center><div id="content-2-1"></div><center></div></div><div id="footer" class="cf"></div></div></div></div><div id="mask"></div></div>');        
//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
	   
       var imgId = $(this).attr("imgId");
	       $("#content-2-1").load("imgZoom.php",'imgId=' + imgId);
		//Cancel the link behavior
		e.preventDefault();
		//Get the A tag
		var id = $(this).attr('href');
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
        //$(id).css('top',  0);
		//$(id).css('left', 0);
	
		//transition effect
		$(id).fadeIn(2000); 
	       
    });
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		$('#mask, .window').hide();
	});		
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});	
    
    
  


    });
</script>

3. fhgdfhdfhdf (12.09.2012 / 16:52)
CSS окон:

<style>

#mask {
  position: fixed;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:no ne;
}
  
#boxes .window {
  position: absolute;
  left:0;
  top:0;
  min-width: 1000px;
  display:no ne;
  z-index:9999;
  padding:20px;
  float: right;
  border: 1px solid gray;
}

#boxes #dialog {
  min-width: 1000px; 
  padding:10px;
  background-color:#ffffff;
}
</style>

4. Алексей (12.09.2012 / 18:30)
исправь на

#boxes .window { 
  position: fixed; 
}

5. fhgdfhdfhdf (12.09.2012 / 22:07)
тогда если окошко слишком длинное оно не будет прокручиваться (например если там после фото идут коментарии)

6. Петр (13.09.2012 / 18:32)
Можно узнать, на сколько пикселей прокручена страница и прибавлять это значение. В чистом js как-то так: window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop

7. fhgdfhdfhdf (13.09.2012 / 22:15)
6. Im-ieee, немного не понял это разные способы узнать px или это один способ который можно присвоить переменной?

8. Петр (14.09.2012 / 06:49)
7. 6680, один способ. var scrlY=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop;

9. fhgdfhdfhdf (14.09.2012 / 11:16)
тоже не совсем то((( нужно чтобы оно открывалось сразу в зоне видимости в плотную к топу но чтобы назад в верх крутить не льзя было, только в низ до конца коментарий

URL: https://visavi.net/topics/34408