2014-02-21 2 views
0

Я использую highslide для всплывающего окна. Я хотел бы иметь стабильное положение всплывающего окна.highslide фиксированное положение popup

Я пробовал:

hs.marginTop="120"; 

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

Мой код:

    hs.graphicsDir = "./includes/highslide/graphics/"; 
        hs.outlineType = "rounded-white"; 
        hs.wrapperClassName = "draggable-header"; 
        hs.marginTop="120"; 

     $(function() { 
         var dialog=$(".siteText").html(); 
         $("#highslide-html .highslide-body").html(dialog); 

         if(!$(".highslide-body").is(":empty")) 
         { 
          hs.htmlExpand(this, { contentId: \'highslide-html\' }) 
         } 

        }); 

HTML:

 <div class="highslide-html-content" id="highslide-html" style="width:950px;color:black;"> 

        <div class="highslide-header"> 
          <ul> 
            <li class="highslide-close"> 
              <a href="#" title="Close (esc)" onclick="return hs.close(this)"><span>Close</span></a> 
            </li> 
          </ul> 
        </div> 
        <div class="highslide-body"> 
        </div> 
       <div class="highslide-footer"> 
        <div> 
         <span class="highslide-resize" title="Resize"> 
          <span></span> 
         </span> 
        </div> 
       </div> 
      </div> 

EDIT: Он работает ... Но это очень некрасиво эффект ... Всплывающее подскакивает. Сначала находится внизу, затем прыгает вверх.

if (!hs.ie || hs.uaVersion > 6) hs.extend (hs.Expander.prototype, { 
fix: function(on) { 
    var sign = on ? -1 : 1, 
     stl = this.wrapper.style; 

    if (!on) hs.getPageSize(); // recalculate scroll positions 


    hs.setStyles (this.wrapper, { 
     position: "fixed", 
     zoom: 1, // IE7 hasLayout bug, 
     left: (parseInt(stl.left) + sign * hs.page.scrollLeft) +"px", 
     top: "125px" 
    }); 

    if (this.outline) { 
     stl = this.outline.table.style; 
     hs.setStyles (this.outline.table, { 
      position: "fixed", 
      zoom: 1, // IE7 hasLayout bug, 
      left: (parseInt(stl.left) + sign * hs.page.scrollLeft) +"px", 
      top: "120px" 
     }); 

    } 
    this.fixed = on; // flag for use on dragging 
}, 
onAfterExpand: function() { 
    this.fix(true); // fix the popup to viewport coordinates 
}, 

onBeforeClose: function() { 
    this.fix(false); // unfix to get the animation right 
}, 

onDrop: function() { 
    this.fix(true); // fix it again after dragging 
}, 

onDrag: function(sender, args) { 
    if (this.fixed) { // only unfix it on the first drag event 
     this.fix(true); 
    } 
}}); 

THX :)

ответ

0

Использование hs.marginTop не будет работать. То, что вам нужно, это hs.targetX и hs.targetY. Это позволяет вам размещать всплывающее окно в фиксированном положении, несмотря ни на что. См. API: http://highslide.com/ref/hs.targetX. Обратите внимание на требование для целевого «div» с идентификатором на нем - это может быть просто пустой заполнитель, но он должен существовать.

0

Просто добавьте

.highslide-container 
{ 
    position:fixed; top:200px; left:-380px 
    } 

в вашем Highslide CSS, которые вы используете, и удаления:

position: 'absolute', 
       left: 0, 
       top: 0, 

только из скрипта Highslide вы используете из на позиции данного

className: 'highslide-container' 
      }, { 
       position: 'absolute', 
       left: 0, 
       top: 0, 
       width: '100%', 
       zIndex: hs.zIndexCounter, 
       direction: 'ltr' 
      }, 
      document.body, 
Смежные вопросы