Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » FAQ по созданию всплывающих и диалоговых окон (pop-up/popup)

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Открыть новую тему     Написать ответ в эту тему

Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
обзор форума » (клиентские скрипты » JavaScript) »  FAQ по окнам / Новые вопросы по окнам

 
Новые вопросы по браузерным окнам
По всплывающим (pop-up) окнам, а также модальным (диалоговым) окнам

 
В связи с тем, что "шапка" данной темы значительно разрослась, она была вынесена в отдельную закрытую тему.
 

 
Новые вопросы, заданные в этой теме и полученные на них ответы будут также добавляться в FAQ по окнам
 
Svarga.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 13:03 09-07-2003 | Исправлено: Svarga, 03:54 28-06-2004
zahnseide



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
создал отдельную тему но видно не там.У меня вот вопрос какой.Возможно ли объединить в один код эти два  разных кода .
 
 
<a href="http://западло.ру" onclick="window.open(this.href,this.target,'width=3, height=2,top=0,left=0,' +'location=no,header=no,toolbar=no,menubar=no,status=no,scrollbars=no,resizable=0');return false;">текст ссылки, открывающей новое окно заданного размера</a  
 
 
и вот этот a href="http://www.google.ru" onclick="window.location='http://западло.ру'; return false;">Ссылка с подменой адреса</a>
 
крутил и так и эдак,не идёт
 
смысл в том чтобы процесс перехода(редиректа) происходил незаметно для юзера в маленьком окне

Всего записей: 48 | Зарегистр. 04-10-2006 | Отправлено: 19:45 13-04-2010 | Исправлено: zahnseide, 20:10 13-04-2010
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
zahnseide

Цитата:
смысл в том чтобы процесс перехода(редиректа) происходил незаметно для юзера в маленьком окне

подробнее

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 20:19 13-04-2010
zahnseide



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
ну параметры окна видите?2 на 3 пикселя .Следовательно просмотр перемены адресов в адресной строке будет невозможен.вот и спрашиваю...

Всего записей: 48 | Зарегистр. 04-10-2006 | Отправлено: 01:13 14-04-2010
Raz0rnsk

Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
добрый день
скажите, какой библиотекой и вообще как реализован тут постинг на твиттер, фейсбук и тд картинок перетаскиванием.
http://www.hongkiat.com/blog/beautiful-ipad-fingerpaint-piece-de-resistance/
 
мне бы эту библиотеку
в исходниках сайта копался, скриптов прикрученных много, но нужного не нашел

Всего записей: 338 | Зарегистр. 26-10-2007 | Отправлено: 12:47 29-07-2010
imenshikov

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Как вставить ссылку "Закрыть окно" во всплывающее окно, в скрипте есть вот такое:  
 
var objLoading = document.createElement('div');
            this.objBase.appendChild(objLoading);
            
            setStyle(objLoading, 'backgroundColor:#ffffff; zIndex:121; position:absolute; padding:20px; left:'+(page[2]/2-50+20)+'px; top:'+(page[3]/2-50)+'px;visibility: visible;');
            var objImgLoading = document.createElement('img');
//            objImgLoading.src = this.shop_url+'published/SC/html/scripts/images_common/loading.gif';
            objImgLoading.src = ((window.CONF_ON_WEBASYST||(this.shop_url.search('tianna.kz')!=-1))?(this.shop_url.replace(/imagess\//,'')+'imagess/')this.shop_url+'published/SC/html/scripts/'))+'loading.gif';
            objLoading.appendChild(objImgLoading); - но при загрузке окна картинка не показывается почему?  
 
'closeButton': function(parentObject){
    
        with(this){
            var objCloseButton = document.getElementById(prefix+'closeButton');
            if(!objCloseButton){
                objCloseButton = document.createElement('img');
                objCloseButton.id = prefix+'closeButton';
            }
 
            var left = parentObject.offsetLeft+parentObject.offsetWidth-22;
            var top = parentObject.offsetTop-25;
            setStyle(objCloseButton, 'position:absolute; top:'+top+'; left:'+left+'; cursor:pointer; cursor:hand');
            //DEBUG:
            //alert(this.shop_url);
            //objCloseButton.src = ((window.CONF_ON_WEBASYST||(this.shop_url.search('tianna.kz')!=-1))?(this.shop_url.replace(/shop\//,''))this.shop_url+'published/SC/html/scripts/'))+'images_common/close.gif';
            objCloseButton.src = ((window.CONF_ON_WEBASYST||(this.shop_url.search('tianna.kz')!=-1))?(this.shop_url.replace(/imagess\//,'')+'imagess/')this.shop_url+'published/SC/html/scripts/'))+'close.gif';
//            objCloseButton.src = this.shop_url+'published/SC/html/scripts/images_common/close.gif';
            objCloseButton.onclick = function(){sswgt_CartManager.hide(true);return false;};
            objBase.appendChild(objCloseButton);
        };
    }, - ЭТО ТОЖЕ НЕ РАБОТАЕТ КРЕСТИКА НЕ ВИДНО И НЕ МОЖЕМ ЗАКРЫТЬ ВСПЛЫВАЮЩЕЕ ОКНО - КАК ВСТАВИТЬ ССЫЛКУ ЗАКРЫТЬ ОКНО ВО ВСПЛЫВАЮЩЕЕ ОКНО?

Всего записей: 1 | Зарегистр. 17-09-2010 | Отправлено: 14:08 17-09-2010
pkforewer



Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
можете помоч, пролистал все 13 стр. не нашел скрипта по такому типу
"рекламый баннер после клика на любую рекламу он закрываетца" пожет ткнете нюба носом?

Всего записей: 2 | Зарегистр. 03-10-2010 | Отправлено: 23:29 03-10-2010
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
В эпоху jQuery все делается без проблем с его помощью
Огромный выбор из уже написанных реализаций
http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/
и небольшой самостоятельный туториал
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
 
pkforewer

Цитата:
"рекламый баннер после клика на любую рекламу он закрываетца" пожет ткнете нюба носом?

а точнее? речь о надоедливой плавающей рекламе по центру, что ли?

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 01:31 02-02-2011 | Исправлено: Cheery, 01:32 02-02-2011
Vasily Jurevich

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Здраствуйте!  
столкнулся с проблемой...
сделал, как написал Svarga.

Цитата:
<script>  
function imgWin(img)  
{  
var tmp=new Image  
tmp.src=img  
var wdth=tmp.width+20  
var hght=tmp.height+20 //  
/*тут нужно посчитать, сколько пикселов уходит на margin'ы  
   вокруг картинки и вставить число вместо 20-- это чтоб полос прокрутки  
   ненужных не появилось */  
window.open(img,'','width='+wdth+',height='+hght)  
}  
</script>  
 

 
ссылка(миниатюрное изображение) на большую картинку выглядит так

Цитата:
 
<a href="javascript:void imgWin('gallery/25.jpg')"><img src="gallery/small/25.jpg" alt="StoneMagic" /></a>
 

 всё получилось, !но при первом открывании ссылки в новом окне - оно (окно) получается маленьким по размерам (где-то 40 на 40 пикселей), а когда открываю ссылку повторно - то всё работает как надо.
помогите решить проблему, пожалуйста

Всего записей: 2 | Зарегистр. 19-02-2011 | Отправлено: 22:57 19-02-2011
S0ldier



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Vasily Jurevich
Нужно подождать, когда загрузится картинка, а потом получать ее размеры:

Код:
...
var tmp=new Image();
tmp.src=img;
tmp.onload = function() {
...
}
 


Всего записей: 3230 | Зарегистр. 18-01-2005 | Отправлено: 23:44 19-02-2011
Vasily Jurevich

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
прошу прощения, ув.S0ldier, будьте любезны написать как именно будет выглядеть данный код целиком, ибо у меня что-то не выходит.. всёравно при первом переходе по ссылке появляется маленькое окошко в котором расположена картинка (всего 50х70 пикселей)..  и только при повторном переходе по ссылке открывается как нужно...

Всего записей: 2 | Зарегистр. 19-02-2011 | Отправлено: 13:21 20-02-2011
S0ldier



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Vasily Jurevich

Код:
function imgWin(img)  
{  
var tmp=new Image;  
tmp.src=img;
tmp.onload = function() {  
var wdth=tmp.width+20;  
var hght=tmp.height+20;  
window.open(img,'','width='+wdth+',height='+hght);  
}    
}

Проверил в Opera 11.01, Mozilla Firefox 3.6.13, Google Chrome 9.0, IE 8. Работает. Вы в каком браузере смотрите?

Всего записей: 3230 | Зарегистр. 18-01-2005 | Отправлено: 01:21 21-02-2011
reboljuice2

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
По очереди открываю окна (из одного другое) при помощи window.open(...). Как расчитать параметры top и left для этой функции, чтобы цепочка окон выглядела упорядоченой как "cascade" ?

Всего записей: 7 | Зарегистр. 19-04-2011 | Отправлено: 12:48 19-04-2011 | Исправлено: reboljuice2, 15:03 19-04-2011
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
reboljuice2

Цитата:
Как расчитать параметры top и left для этой функции, чтобы цепочка окон выглядела упорядоченой как "cascade" ?

а вы заранее знаете количество окон или предлагаете двигать существующие?

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 21:26 19-04-2011
reboljuice2

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
а вы заранее знаете количество окон или предлагаете двигать существующие?

 
Количество окон заранее неизвестно. Предполагается открывать каждое следующее окно так, чтобы оставался виден заголовок предыдущего окна (левый верхний смещается вниз, правый нижний в том же месте, что и у вызвавшего окна)

Всего записей: 7 | Зарегистр. 19-04-2011 | Отправлено: 08:47 20-04-2011
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
reboljuice2
ну так получайте координаты того, из которого открываете
что то вида
var winX = (document.all)?window.screenLeft:window.screenX;
var winY = (document.all)?window.screenTop:window.screenY;
добавляете/вычитаете какое то число к обоим
и это даст координаты следующего окна
window.open("page.html","","top="+(Y+50)+",left="+(X+50)+",width=450,height=350")

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 08:53 20-04-2011
reboljuice2

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
window.open("page.html","","top="+(Y+50)+",left="+(X+50)+",width=450,height=350")

 
С левым верхним у нового проблемы снял (решено так как у Вас) и вполне подходит. CС шириной нового тоже все ОК - ... "width="+clientWidth+....
 
Остался вопрос с правым нижним - не могу вычислить height для нового окна так, чтобы низ нового был равен низу старого (или чуть выше).

Всего записей: 7 | Зарегистр. 19-04-2011 | Отправлено: 10:16 20-04-2011
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
reboljuice2

Цитата:
Остался вопрос с правым нижним - не могу вычислить height для нового окна так, чтобы низ нового был равен низу старого (или чуть выше

вы, вроде бы, каскадом хотели? там размеры окон одинаковы, просто смещены немного.
или не хотите, чтобы закрывались?
вот вам, например, определение размеров

Код:
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
 winW = document.body.offsetWidth;
 winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth ) {
 winW = document.documentElement.offsetWidth;
 winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
 winW = window.innerWidth;
 winH = window.innerHeight;
}

но это может не учитывать размеров тулбаров
 
почти такой же код тут  
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow


----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 10:19 20-04-2011 | Исправлено: Cheery, 10:20 20-04-2011
reboljuice2

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
вы, вроде бы, каскадом хотели?

 
Да - потом уточнил, что не совсем каскад.
 
Примеры работают не так, как хотелось бы. Именно не учитывается высота заголовка, статуса и тулбара.  
 
То, что нужно было получилось для очень конкретного случая. Вот такое решение
 

Код:
                var DH=-23;
                var b=document.body;
 
                var t=window.screenTop;
                var l=window.screenLeft-2*b.clientLeft;
                var h=b.offsetHeight-2*b.clientTop+DH;
                var w=b.offsetWidth-2*b.clientLeft;
 
                var wnd=window.open('test1.html','',
                    'top='+t
                    +','+'left='+l
                    +','+'width='+w
                    +','+'height='+h
                    +','+'scrollbars=0,resizable=1'
                    //+',menubar=1,status=1,scrollbars=1'
                );
 

Всего записей: 7 | Зарегистр. 19-04-2011 | Отправлено: 11:40 20-04-2011
KuPbI4

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Дана эта форма:

Код:
 
<form action="methods_admin_add.php" method="post" ENCTYPE="multipart/form-data">
        <label>
          Наименование методички:<input type="text" name="name_method"/><br>
          Дата:<input type="text" name="data" value="<? echo date('Y-m-d');?>"/><br>
          Коментарий:<input type="text" name="comment_methods"/><br>
          Файл:<input type="file" name="file"></td><br>
         <input type="submit" value="Добавить" name="methods_admin_add"/>&nbsp;<input type="reset" value="Очистить"/><br>
    </label>
        </form>
 

Дан скрипт о проверке пустоты поля.

Код:
 
<?
if(strlen(trim($name_method)) > 0) {
    if(strlen(trim($data)) > 0) {
        if(strlen(trim($comment_methods)) > 0) {
                        /*if(strlen(trim($file_name)) > 0) {*/
                            if(is_uploaded_file($_FILES["file"]["tmp_name"])) {
                            $file_name=$_FILES['file']['name'];
                            copy($_FILES['file']['tmp_name'],"../files/methods/".$_FILES['file']['name']);
$query="INSERT INTO methods ( name_method, data, comment_methods, file_name ) VALUES ('$name_method', '$data', '$comment_methods', '$file_name')";
                                        if (mysql_query($query)) {  
                                        header("Location: index.php");
                                        }
                                        else {  
                                        header("Location: methods_admin_form_add.php");
                                        }
                                    }
                                    else {echo "Загрузите файл<form action='methods_admin.php'><input type='submit' value='Жмем' onclick='history.go(-1);return false;'></form>";}
                                }  
                      /*   else {
                                echo "Загрузите файл<form action='methods_admin.php'><input type='submit' value='Жмем' onclick='history.go(-1);return false;'></form>";
                                }
                }*/
                else {
                        echo "Введите комментарий методического пособия<form action='methods_admin.php'><input type='submit' value='Жмем' onclick='history.go(-1);return false;'></form>";
                        }
        }
        else {
                echo "<script language='JavaScript'>window.alert('Введите дату выкладывания');
        location.href='methods_admin_form_add.php';
        </script>";
                }
}  
else {  
        echo "<script language='JavaScript'>window.alert('Введите наименование методического пособия');
        location.href='methods_admin_form_add.php';
        </script>";
}
?>

Сделал модальное окно, чтоб выводилось, что если поле ввода не ввели и выводится например Введите дату выкладывания, и переходит на обратную страницу, но не запоминает, что я ввел в поле ввода Методического пособия.
Задача.  
Каким образом можно сделать так, чтобы введенное поле ввода запомнилось, после просмотра модального окна и нажатия кнопки ОК?!

Всего записей: 212 | Зарегистр. 13-10-2008 | Отправлено: 18:03 25-04-2011
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
KuPbI4

Цитата:
Каким образом можно сделать так, чтобы введенное поле ввода запомнилось, после просмотра модального окна и нажатия кнопки ОК?!

запомнилось где? на сервере или у клиента?
пишите в куки - попадет и на сервер при следующем запросе и сохранится у клиента

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 21:12 25-04-2011
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » FAQ по созданию всплывающих и диалоговых окон (pop-up/popup)


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru