jquery ui对话框固定定位 [英] jquery ui dialog fixed positioning

问题描述

我需要对话框保持其位置固定，即使页面滚动，所以我使用
扩展在 http://forum.jquery.com/topic/dialog-position-fixed-12-1-2010 但它有2个问题：

• 它会在IE和Firefox上翻页（在Safari / Chrome中很好）

$ b

p>这是我用来创建对话框的代码：

  $（'< div id ='+ divpm_id + '>< div id =inner _'+ divpm_id +'>< / div>< textarea class =msgTxtid =txt+ divpm_id +'rows =2> textarea>< / div>'）
 .dialog（{
 autoOpen：true，
 title：user_str，
 height：200，
 stack：true，
 sticky：true //使用ui对话框扩展来保持它固定
}）; 
  

下面是我用来重新打开它的代码：

  jQuery（'＃'+ divpm_id）.parent（）。css（'display'，'block'）; 
  

建议/解决方案？

/ p>

解决方案

我尝试了一些在这里发布的解决方案，但如果页面在对话框之前滚动打开。问题是它计算位置而不考虑滚动位置，因为在此计算期间位置是绝对的。

我发现的解决方案是设置对话框的父CSS用于固定PRIOR以打开对话框。

  $（'＃my-dialog'）。 position：fixed}）end（）。dialog（'open'）; 
  

这假设您已经初始化了autoOpen设置为false的对话框。

注意，如果对话框可以调整大小，这不会工作。必须使用调整大小禁用初始化，以使位置保持固定。

  $（'＃my-dialog'）。dialog（{autoOpen：false，resizable：false}）; 
  

彻底测试，到目前为止还没有发现错误。

I needed the dialog to maintain its position fixed even if the page scrolled, so i used the extension at http://forum.jquery.com/topic/dialog-position-fixed-12-1-2010 but there's 2 problems with it:

• it flickers in IE and Firefox on page scroll (in Safari/Chrome it's fine)

• on closing and then reopening, it looses its stickyness and scrolls along with the page.

Here's the code i'm using for creating the dialog:

$('<div id="'+divpm_id+'"><div id="inner_'+divpm_id+'"></div><textarea class="msgTxt" id="txt'+divpm_id+'" rows="2"></textarea></div>')
                .dialog({
                autoOpen: true,
                title: user_str,
                height: 200,
                stack: true,
                sticky: true //uses ui dialog extension to keep it fixed
     });

And here's the code i'm using for reopening it:

jQuery('#'+divpm_id).parent().css('display','block');

Suggestions/solutions?

Thanks

解决方案

I tried some of the solutions posted here, but they don't work if the page has been scrolled prior to the dialog being opened. The problem is that it calculates the position without taking into account the scroll position, because the position is absolute during this calculation.

The solution I found was to set the dialog's parent's CSS to fixed PRIOR to opening the dialog.

$('#my-dialog').parent().css({position:"fixed"}).end().dialog('open');

This assumes that you have already initialized the dialog with autoOpen set to false.

Note, this does not work if the dialog is resizable. It must be initialized with resizing disabled in order for the position to remain fixed.

$('#my-dialog').dialog({ autoOpen: false, resizable: false });

Tested this thoroughly and have found no bugs so far.

这篇关于jquery ui对话框固定定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！