Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Расчет высоты к месту клика
 
 автор: immortal727   (28.11.2016 в 12:57)   письмо автору
 
 

Делаю на сайте всплывающее окно. Пытаюсь сделать по примеру http://lifeexample.ru/jquery-javascript-primeryi/vsplyivayushhee-okno-jquery.html
Но дело в том, если на сайте написано много и идет прокрутка вниз.
Нужно рассчитать высоту к месту клика, только как не знаю. Подскажите пожалуйста

  Ответить  
 
 автор: Deed   (29.11.2016 в 02:22)   письмо автору
 
   для: immortal727   (28.11.2016 в 12:57)
 

http://jsbin.com/qebifa/edit?output
See JS:

var over = document.querySelector('.overlay');
var OverIm = document.querySelector('.overlay img');
over.classList.toggle('hidden');
  var ImH = OverIm.height;
  var WH = window.innerHeight;
  if(WH > ImH){
    OverIm.style.marginTop = (WH - ImH) / 2 + 'px';
  }
  else{
    OverIm.style.marginTop = 'auto';
    OverIm.style.marginBottom = 'auto';
  }

And CSS:

.overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:215;
  background-color: rgba(0, 0, 0, 0.7);
}
.overlay img{
  display: block;
  margin: 215px auto;
}
.hidden{
  display: none;
}



And scroll this page to it bottom and click the button.

  Ответить  
 
 автор: immortal727   (29.11.2016 в 12:41)   письмо автору
 
   для: Deed   (29.11.2016 в 02:22)
 

Мне не надо к img, у меня должно идти к блоку с id
Пытаюсь изменить, но не получается ничего
// Скрипт popup окна
    $(document).ready(function(){
        var pop_window = $('#pop-up-window');
            
        var X = ($(window).width()-pop_window.width())/2;
        var Y = ($(window).height()-pop_window.height())/2;
        var WH = window.innerHeight; 
        if(WH > pop_window.height()){ 
            Y = (WH - pop_window.height()) / 2 + 'px'; 
        } 
        else{ 
            pop_window.css('top', 'auto' + 'px');
            pop_window.css('bottom', 'auto' + 'px');
        } 
       
        pop_window.css('left', X+ 'px');
        pop_window.css('top', Y+ 'px');
             
        pop_window.hide();
        var visible_window=false;
    
        $('#showWindow').click(function(){ 
            
        if(!visible_window){
            pop_window.css('display', 'block');
            pop_window.css('top', -pop_window.height() + 'px');         
            pop_window.animate({top:Y},"slow");
            visible_window=true;
                }
        else{   
            pop_window.css('display', 'block');     
            pop_window.animate({top:-pop_window.height()},"slow");
            visible_window=false;
            }
        });
            
    
        $('#btnClose').click(function(){ 
            pop_window.hide(1000);
        });
    
   });
    
});

  Ответить  
 
 автор: confirm   (29.11.2016 в 14:18)   письмо автору
 
   для: immortal727   (29.11.2016 в 12:41)
 

А кто будет учитывать прокрученное?

  Ответить  
 
 автор: immortal727   (29.11.2016 в 19:25)   письмо автору
 
   для: confirm   (29.11.2016 в 14:18)
 

Можно просто написать расчет места где я нахожусь или подправить скрипт?

  Ответить  
 
 автор: confirm   (30.11.2016 в 13:35)   письмо автору
 
   для: immortal727   (29.11.2016 в 19:25)
 

Если интересуют координаты щелчка и к ним привязать нужно нечто, то это нечто должно позиционироваться абсолютно, а значит прокрутка документа должна учитываться. Вот только не понять зачем это нужно, если все гораздо проще сделать с fixed.

  Ответить  
 
 автор: immortal727   (05.12.2016 в 10:34)   письмо автору
 
   для: confirm   (30.11.2016 в 13:35)
 

fixed не совсем устраивает. Я пока так и сделал. Хочется чтоб это было при absolute.
Я с js очень плохо. Пожалуйста, напишите код как это рассчитать.

  Ответить  
 
 автор: confirm   (05.12.2016 в 13:20)   письмо автору
 
   для: immortal727   (05.12.2016 в 10:34)
 

Поищите в сети, есть готовые и плагины, и уроки. Я конечно могу написать и пояснить, но нет у меня сейчас для этого свободного времени.

  Ответить  
 
 автор: immortal727   (05.12.2016 в 13:44)   письмо автору
 
   для: confirm   (05.12.2016 в 13:20)
 

Я перед тем как написать в форум уже много времени потратил на сети. И нигде не могу найти как это дело рассчитать.

  Ответить  
 
 автор: confirm   (06.12.2016 в 12:03)   письмо автору
 
   для: immortal727   (05.12.2016 в 13:44)
 

В jQuey есть метод .scrollTop(), который возвращает значение прокрутки документа. Если вы при щелчке привязываете к этим координатам нечто, то чтобы "вклеить" в это место это нечто, нужно еще знать на сколько прокручен документ, иначе ваше нечто либо уплывет наверх, либо сползет вниз.

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования