highslide 固定位置弹出答案

【问题标题】：highslide fixed position popuphighslide 固定位置弹出
【发布时间】：2014-02-21 10:47:27
【问题描述】：

我使用 highslide 弹出。我想要一个稳定的位置弹出窗口。

我试过了：

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>

编辑：它有效......但效果非常难看......弹出窗口跳跃。首先在底部，然后跳到顶部。

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);
    }
}});

谢谢 :)

【问题讨论】：

标签： highslide

【解决方案1】：

使用 hs.marginTop 是行不通的。你所追求的是 hs.targetX 和 hs.targetY。无论如何，这些都可以让您将弹出窗口定位在固定位置。请参阅 API：http://highslide.com/ref/hs.targetX。请注意对带有 ID 的目标“div”的要求 - 它可以只是一个空占位符，但它必须存在。

【讨论】：

【解决方案2】：

只需添加

 .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,

【讨论】：