Перейти к публикации
webil

Всплывающие окно

Рекомендованные сообщения

webil

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

Так как я сам скрипты писать начал только позавчера много не знаю вот и задаю подобные вопросы)

Скрипт:


//popup window
 function popupWinIl(name_id, name_block, body, width, height, bodyload) {
     var winH = $(window).height();
     var winW = $(window).width();
     var topH = (winH/2)-(height/2);
     var leftW = (winW/2)-(width/2);

     if(name_id=='popupWin_1'){
if($("#popupWinIl").is(":visible")){
    function popWinIlinfo() {
$("#pW-top b").html(name_block);
$("#pW-top b").animate({opacity: 1}, {duration:"fast"});    
$("#pW-body").html(body);
$("#pW-body").animate({opacity: 1}, {duration:"fast"});
if(bodyload){
    $("#pW-bodyLoad").load(bodyload)
setTimeout(function() {$("#pW-bodyLoad").animate({opacity: 1}, {duration:"fast"})}, 200);
}else{
    $("#pW-bodyLoad").html("");
    $("#pW-bodyLoad").animate({opacity: 1}, {duration:"fast"});}
    }

    $("#popupWinIl").animate({width: width, height: height, left: leftW, top: topH}, {duration:"fast"});
    $("#pW-top b").animate({opacity: 0}, {duration:"fast"});   
    $("#pW-body").animate({opacity: 0}, {duration:"fast", complete: popWinIlinfo});
    $("#pW-bodyLoad").animate({opacity: 0}, {duration:"fast", complete: popWinIlinfo});
}else{
    if(winH>=height){
if(winW>=width){
    $("#popupWinIl").css({"width": width, "height": height, "left": leftW, "top": topH, "margin": 0});
}else{
    $("#popupWinIl").css({"width": width, "height": height, "left": 10, "top": topH, "margin": 0});
}
    }else{
if(winW>=width){
    $("#popupWinIl").css({"width": width, "height": height, "left": leftW, "top": 10, "margin": 0});
}else{
    $("#popupWinIl").css({"width": width, "height": height, "left": 10, "top": 10, "margin": 0});
}
    }

 $("#pW-top b").html(name_block);
    $("#pW-body").html(body);
    if(bodyload){ $("#pW-bodyLoad").load(bodyload); }else{ $("#pW-bodyLoad").html(""); }


    $("#popupWinIl").fadeIn("fast", 0, function () { 
$("#popupWinIl").animate({opacity:"1"});
    });
}

     }else if(name_id=='popupWin_2'){ //другие виды окна
     }else if(name_id=='popupWin_3'){ //другие виды окна
     }else if(name_id=='popupWin_4'){ //другие виды окна
     }else if(name_id=='closed'){
var topH = 0;
var leftW = 0;

function popWinIlnone() {//обнуление информации
    if(name_block=='none'){
$("#pW-top").html("<b></b><a href=\"javascript://\" onclick=\"popupWinIl('closed','none','','','','none')\"><span>Закрыть</span></a>");
$("#pW-body").html("<font></font>");
$("#pW-bodyLoad").html("");
$("#popupWinIl").css({"width": width, "left": leftW, "top": topH, "display": "none"});
    }
}
$("#popupWinIl").animate({marginTop:"-20px", opacity:"0"}, {duration:"fast", complete: popWinIlnone});
     } 
 }

код вызова:

<a href="#" id="icon-top1" onclick="popupWinIl('popupWin_1','Страница пользования','<div id=\'ididiW\'></div>','340','600','http://tebe-tut-neradi.my1.ru/test/222.html')" class="title_b-r" title="Страница пользования">Окно №1</a><br>
<a href="#" id="icon-top2" onclick="popupWinIl('popupWin_1','пользования','блаблаблбалба тоже текст контента.','400','200','')" class="title_b-r" title="Гостевая">Окно №2</a>

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

<div id="popupWinIl" style="background: #555; position: absolute; z-index: 99999; display: none;">
<div>
<div id="pW-top">
	 <b></b><a href="javascript://" onclick="popupWinIl('closed','none','','','','none')"><span>Закрыть</span></a>
</div>
	 <span><div>
  <div id="pW-body"></div>
  <div id="pW-bodyLoad"></div>
	 </div></span>
</div>
</div>

Но вопрос у меня все-же остался как можно по другому располагать окно по центру экрана но не используя при этом margin

В особенности интересует расположение по оси "Y" так как хотеться иногда поставить высоту не фиксированную а автоматический подбор но так чтоб появлялась по центру

 

Для тех кто хочет увидеть работу скрипт "демо"

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
TheAndrey

Но вопрос у меня все-же остался как можно по другому располагать окно по центру экрана но не используя при этом margin

 

css - position

 

В особенности интересует расположение по оси "Y" так как хотеться иногда поставить высоту не фиксированную а автоматический подбор но так чтоб появлялась по центру

 

Добавлять контейнер в код страницы, узнавать его высоту, высчитывать позицию и только уже показывать.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

 

В особенности интересует расположение по оси "Y" так как хотеться иногда поставить высоту не фиксированную а автоматический подбор но так чтоб появлялась по центру

 

Добавлять контейнер в код страницы, узнавать его высоту, высчитывать позицию и только уже показывать.

 

Тыкался тыкался не мог сделать, но

 

 

Вот пример моих диалоговых окон: http://zagruzka-plus...loads/test.html

P.s. делал для админок своих модулей.

 

Посмотрев скрипт понял как делать, что-то подчеркнул для себя, спасибо)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
МиксирисТ

В особенности интересует расположение по оси "Y"

 

$('#id').css({top:$(window).height()/2 - $('#id').height()/2,left:$(window).width()/2 - $('#id').width()/2});

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

×
×
  • Создать...