高幻灯片固定位置弹出窗口

Question

I use highslide to popup. I would like to have a stable position popup.

I tried:

hs.marginTop="120";

It works when I have a lot of text... When text is short, popup pops random. Usually at the right-bottom

My code:

                    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: It works... But is very ugly effect... Popup jumps. First is at the bottom, then jumps to top.

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 :)

Answer 1

Using hs.marginTop is not going to work. What you're after is hs.targetX and hs.targetY. These let you position the popup in a fixed position, no matter what. See the API: http://highslide.com/ref/hs.targetX . Pay attention to the requirement for a target "div" with an ID on it - it can be just an empty placeholder, but it has to exist.

Answer 2

Just add

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

in your highslide css that you are using and delete :

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

only from the highslide script you are using from on the position given

className: 'highslide-container'
            }, {
                position: 'absolute', 
                left: 0, 
                top: 0, 
                width: '100%', 
                zIndex: hs.zIndexCounter,
                direction: 'ltr'
            }, 
            document.body,