窗口向上滚动时的jQuery对话框打开

我试图打开使用jQuery 1.4和jQuery-UI-1.8rc3.custom.js一个模式对话框的jQuery窗口向上滚动时的jQuery对话框打开

对话框打开了没有任何问题，在所有浏览器，但在IE 7和6中，在对话框打开后，窗口会自动滚动到按钮...我尝试将窗口向上滚动回模态位置，但非常不一致。使用下面的代码行开拓模式后

window.scrollTo($('#selector').dialog('option', 'position')[0],$('#selector').dialog('option', 'position')[1]);

我注意到一个奇怪的是，之后我打开模式，页面变成巨大......如果一些额外的东西就增加了高达底部......并最终滚动到底部。任何想法，为什么这可能

<div id="selector"> 
</div>

中的document.ready

$('#selector').dialog({ 
    bgiframe: true, 
    autoOpen: false, 
    width: 100, 
    height: 100, 
    modal: true, 
    position: 'top' 
});

在JS

$('#selector').dialog('open');

来源

2010-05-05 zoom_pat277

被hapenning

中的HTML像你缺少的#你选择器：

window.scrollTo($('#selector').dialog('option', 'position')[0], $('#selector').dialog('option', 'position')[1]);

这可能是窗口滚动到左上角的原因。

编辑：我只是在看文档和.dialog('option','position')默认值是center。

位置类型：String，数组默认值：

'中心' 指定应显示的对话框，在此。可能的值：1）在视口中代表位置的单个字符串：'center'，'left'， 'right'，'top'，'bottom'。 2）包含x，y坐标对的阵列，所述x，y坐标对来自左边，视口的顶角（例如[350,100]）的像素偏移; 3）包含x，y位置字符串值（例如['right' 'top']右上角转角）。

因此，您可以使用位置选项返回文本或数字，window.scrollTo()需要数字。因此，尝试这个：

var d = $(".ui-dialog").position(); 
window.scrollTo(d.left , d.top);

来源

2010-05-06 00:57:23 Mottie

哦......我想我错过了它，当我复制代码到stackoflow.com和编辑它，它确实有“＃”标志...谢谢指点出来虽然！ – 2010-05-06 02:18:02

我已经更新了我的答案。 – Mottie 2010-05-06 03:16:10

对不起，我没有机会实施你的建议，直到现在。给我几个小时，我会回到你身边。非常感谢您回复！ – 2010-05-06 23:10:23

我也有过类似情况的对话框中打开它应该在页面上，但用户被重定向到页面的底部。基本上，我忘了包含适当的CSS来匹配jQuery UI JavaScript库。通过这样做一切都很好。我想这是类似的东西，在jQuery css中的元素上设置了样式，这些元素不是在你自己的css中设置的。

为了调试问题，我不必包含整个jQuery UI css，我做了两个相同的页面，一个使用jQuery UI css，一个没有，只是通过Firefox上的Firebug检查了css中的不同内容并将这些样式添加到我的CSS。

希望它有帮助。 Mag

来源

2010-05-26 14:11:54 Mag

我也在为这个问题苦苦挣扎。我没有使用任何的主题化，所以我没有这个重要的CSS属性：

position:absolute;

我将此添加到我的CSS文件，现在一切工作正常：

.ui-widget { position: absolute; }

来源

2010-08-03 19:05:50 telecasterrok

这并没有为我工作 – Mike 2014-09-24 23:26:24

如果您在使用像下面的锚标记，以触发对话框

<a href="#" onclick="$(#id).dialog('open');">open dialog</a>

你要添加一个return false;到onclick属性：

<a href="#" onclick="$(#id).dialog('open'); return false;">open dialog</a>

这样可以防止页面重新加载，从而导致页面跳转到顶部，从而导致页面重新加载#。

position: relative;

这是压倒一切的：

position: absolute;

需要通过对话

来源

2010-08-06 14:00:42 bassim

这真的有帮助。当我打开一个模式时，在FF中，屏幕会滚动到顶部，但模态会保持放置状态。 – Adam 2012-08-16 18:34:53

我，因为我是分配类的对话框，在我的样式表中设定了这个问题。

基本上，作出一定的的.ui-对话框类有：

position: absolute;

和窗口不应该滚动到页面底部和额外的垂直空间将不会被添加到身体。

来源

2012-02-24 15:22:50

我如何固定它：

HTML

<a href="javascript:openDialogFunction(parameters)">...</a>

的Javascript

function openDialogFunction(parameters) { 

    var topOff = $(window).scrollTop(); 

    //code to open the dialog 

    $(window).scrollTop(topOff); 
}

来源

2013-03-08 16:05:30

我有类似的问题，我这是怎么解决的。它类似于@bassim解决方案，但它有一点不同的味道。

我有同样的锚标记，并用“$（＃锚元素）。点击（函数（）{..}下面的代码片段 -

在JSP -

<a id="open-add-comments-${site}" class="open-add-comments" href="#" site-id="${site}" project-id="${project}" >Add comments</a><br/>

在javascript中 - 。

$(".open-add-comments").click(function(){ 

    var projectId=$(this).attr("project-id"); 

    $("#add-comment-form").dialog({ 
     //width: "auto", 
     width: 800, 
     height: "auto", 
     position: "absolute", 
     maxWidth: 800, 
     minWidth: 300, 
     maxHeight: 400, 
     modal: true, 
     title: "Adding comment for \"${project.name}\" and site \""+siteName+"\" ", 
     open: function(event, ui) { 

     $("#add-comment fieldset textarea").html("").focus(); 
      ............ 
      ..... 
     }, 
     buttons: { 
      "Save": function() { 

      .... some business logic 

      }, 
      Cancel: function() { 
       $(this).dialog("close"); 

      } 
     } 

    }); 

    return false; // -- THIS IS IMPORTANT AND RESOLVED THE ISSUE 

});

这并获得成功，并解决了这个问题非常感谢您休息在此页面中谁给了很好的三分球，并帮助解决问题荣誉团队

来源

2013-03-20 21:21:22 Sirish

另一个解决方案是调用事件。的preventDefault当对话框打开

$('#demo4').click(function() { 
    $("#tallContent").dialog("open"); 
    event.preventDefault(); 
});

来源

2013-06-15 07:03:56 Agustincl

窗口向上滚动时的jQuery对话框打开

回答

相关问题