Фиксация модального модуля в позиции сайта

B
На сайте с 03.08.2012
Offline
12
643

Ребят здравствуйте.

Возникла проблема.

Имеется модуль меню с элементом behavior.modal - может выводиться как вверху, внизу слевой и правой сторон сайта. Настройки указанны по умолчанию.

Модуль идеально подходит по фкнкциям но не вписывается расположением в дизайн сайта.

В шаблоне есть позиция ( middle_top_1 ) расположена в центре сайта.

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

Вот код .php модуля:

<?php

// no direct access

defined('_JEXEC') or die('Restricted access');

JHTML::_('behavior.modal');

$slideID = $params->get( 'slideID','vtemsweetmenu1' );

$menuposition = $params->get('menuposition', 1);

$openDim = $params->get('openDim', 90);

$closeDim = $params->get('closeDim', 60);

$duration = $params->get('duration', 200);

$opacity = $params->get('opacity', 0.8);

$space = $params->get('space', 5);

$txtcolor = $params->get( 'txtcolor','#fff' );

$fontsize = $params->get( 'fontsize','12px' );

$background = $params->get( 'background','#333' );

$script = $params->get( 'script', 1);

$marginwidth = $openDim-$closeDim;

if($menuposition == 1 || $menuposition == 3) $sub = "-";

if($menuposition == 1 || $menuposition == 2){$margin = "'marginTop':'".$sub.$marginwidth."px'"; $marginclose = "'marginTop'";}

if($menuposition == 3 || $menuposition == 4){$margin = "'marginLeft':'".$sub.$marginwidth."px'"; $marginclose = "'marginLeft'";}

if ($script == 1){

echo "<script src='".JURI::root()."modules/mod_vtem_sweet_menu/sweet_menu/jquery_v1.5.2.js' type='text/javascript'></script>";

}

?>

<script type="text/javascript">

var vtemsweetmenu = jQuery.noConflict();

(function($) {

$(document).ready(function(){

var d=300;

$('#<?php echo $slideID;?> a').each(function(){$(this).stop().animate({<?php echo $margin;?>},d+=150);});

$('#<?php echo $slideID;?> > li').hover(

function(){$('a',$(this)).stop().animate({<?php echo $marginclose;?>:'0px'},<?php echo $duration;?>);},

function(){$('a',$(this)).stop().animate({<?php echo $margin;?>},<?php echo $duration;?>);}

);

});

})(jQuery);

</script>

<style type="text/css">

ul#<?php echo $slideID;?> {

position: fixed;

margin: 0px;

padding: 0px;

<?php if($menuposition == 1) echo "top: 0px;right: 35px;";

if($menuposition == 2) echo "bottom: 0px;right: 10px;";

if($menuposition == 3) echo "top: 10px;left: 0px;";

if($menuposition == 4) echo "top: 10px;right: 0px;";?>

list-style: none;

z-index:9999;

}

ul#<?php echo $slideID;?> li {

<?php if($menuposition == 1 || $menuposition == 2) echo "display:inline;float:left;";?>

}

ul#<?php echo $slideID;?> li a {

display: block;

font-weight:bold;

padding:5px;

cursor:pointer;

text-decoration:none !important;

background-color:<?php echo $background;?>;

color:<?php echo $txtcolor;?>;

font-size:<?php echo $fontsize;?>;

opacity: <?php echo $opacity;?>;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=<?php echo $opacity*100;?>);

<?php if($menuposition == 1){?>

height:<?php echo $openDim;?>px;

float:left;

margin:0 <?php echo $space;?>px;

text-align:center;

-moz-border-radius:0px 0px 5px 5px;

border-radius:0px 0px 5px 5px;

-webkit-border-bottom-right-radius: 5px;

-webkit-border-bottom-left-radius: 5px;

-khtml-border-bottom-right-radius: 5px;

-khtml-border-bottom-left-radius: 5px;

<?php }if($menuposition == 2){?>

height:<?php echo $openDim;?>px;

float:left;

margin:0 <?php echo $space;?>px -<?php echo $marginwidth;?>px <?php echo $space;?>px;

text-align:center;

-moz-border-radius:5px 5px 0px 0px;

border-radius:5px 5px 0px 0px;

-webkit-border-top-right-radius: 5px;

-webkit-border-top-left-radius: 5px;

-khtml-border-top-right-radius: 5px;

-khtml-border-top-left-radius: 5px;

<?php }if($menuposition == 3){?>

width:<?php echo $openDim;?>px;

margin:<?php echo $space;?>px 0;

text-align:right;

-moz-border-radius:0px 5px 5px 0px;

border-radius:0px 5px 5px 0px;

-webkit-border-bottom-right-radius: 5px;

-webkit-border-top-right-radius: 5px;

-khtml-border-bottom-right-radius: 5px;

-khtml-border-top-right-radius: 5px;

<?php }if($menuposition == 4){?>

width:<?php echo $openDim;?>px;

margin:<?php echo $space;?>px -<?php echo $marginwidth;?>px <?php echo $space;?>px 0;

text-align:left;

-moz-border-radius:5px 0px 0px 5px;

border-radius:5px 0px 0px 5px;

-webkit-border-bottom-left-radius: 5px;

-webkit-border-top-left-radius: 5px;

-khtml-border-bottom-left-radius: 5px;

-khtml-border-top-left-radius: 5px;

<?php }?>

}

ul#<?php echo $slideID;?> li a img.vtemimgsweet{

width:<?php echo $closeDim-5;?>px;

height:<?php echo $closeDim-5;?>px;

margin:5px;

border:none;

}

ul#<?php echo $slideID;?> li a span{

display:block;

}

<?php if($menuposition == 3){?>ul#<?php echo $slideID;?> li a span,ul#<?php echo $slideID;?> li a img.vtemimgsweet{float:right;}<?php }?>

<?php if($menuposition == 4){?>ul#<?php echo $slideID;?> li a img.vtemimgsweet{float:left;}<?php }?>

<?php if($menuposition == 3 || $menuposition == 4){?>

ul#<?php echo $slideID;?> li a{height:<?php echo $closeDim;?>px; vertical-align:bottom;}

ul#<?php echo $slideID;?> li a span{height:<?php echo $closeDim-15;?>px; width:<?php echo ($openDim - $closeDim)-5;?>px; padding-top:10px; overflow:hidden;}

<?php }?>

<?php if($menuposition == 1 || $menuposition == 2){?>

ul#<?php echo $slideID;?> li a{width:<?php echo $closeDim;?>px;}

ul#<?php echo $slideID;?> li a span{width:<?php echo $closeDim;?>px; height:<?php echo ($openDim - $closeDim)-5;?>px; overflow:hidden; text-align:center;}

<?php }?>

<?php echo $params->get('css'); ?>

.vtem_sweet_item a:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

zoom: 1;

}

</style>

<ul id="<?php echo $slideID;?>" class="vtemsweet">

<?php

for($i=1; $i<=20; $i++){

if ($params->get('status'.$i) == 1 && $params->get('image'.$i) != ""):

?>

<li class="vtem_sweet_item"><a href='<?php echo $params->get('url'.$i);?>' <?php if($params->get('target'.$i) == "lightbox"){?> class='modal' rel="{handler:'iframe', size: {x: 800, y: 500}}" <?php }else{echo "target=".$params->get('target'.$i);}?>>

<?php if($menuposition == 1){?>

<span><?php echo $params->get('label'.$i);?></span><img class="vtemimgsweet" src='<?php echo JURI::root().$params->get('image'.$i); ?>' alt='vtemsweet' />

<?php }else{?>

<img class="vtemimgsweet" src='<?php echo JURI::root().$params->get('image'.$i); ?>' alt='vtemsweet' /><span><?php echo $params->get('label'.$i);?></span>

<?php }?>

</a></li>

<?php endif;

}

?>

</ul>

B
На сайте с 03.08.2012
Offline
12
#1

Ответов нет?

дани мапов
На сайте с 06.09.2012
Offline
204
#2

Код надо было нормально оформить, попробуйте убрать: position: fixed;

Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)
B
На сайте с 03.08.2012
Offline
12
#3

Спасибо выручил

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий