JQueryUI Диалог Перемещение/перемещение курсора Mis-Alignment в IE/Firefox

Question

Я пытаюсь создать общий дисплей сообщений с помощью JQueryUI Dialog.

Он работает очень хорошо, если страница коротка или меньше, чем экран пользователя.

Но если страница слишком длинная, и пользователям приходится прокручивать, пользователи не могут правильно перемещать диалоговое окно.

Курсор должен находиться на панели заголовка диалога. Вместо этого есть расстояние между строкой заголовка и фактическим значком курсора. Чем длиннее страница, тем больше расстояние.

См. Скриншот.

Проблема возникает только в IE и Firefox. Он работает в Google Chrome.

Я уже создал тестовую страницу в JSFiddle. Извините, если моя проблема сбивает с толку. Вы можете четко видеть проблему в JSFiddle.

http://jsfiddle.net/thetwai/6cuof2tm/

$(function() { 
     $("#dvDialog").dialog({ 
      autoOpen: false 
     }); 
    }); 



    ShowCustomInfoMessageBox = function (msg, title) { 

     $("#dvDialog").dialog({ 
      title: title, 
      width: 400,     
     }).dialog("open").html(msg); 

    } 

Answer 1

http://jsfiddle.net/6cuof2tm/1/

использование appendTo вариант и завернуть содержание с ДИВ {position:relative}

HTML:

<div id="test"> 
    Long Page test with JQuery UI Dialog Please scroll to botton to view Button 
    <br /> 
    <br />Scroll to Bottom.... 
    <br /> 
    <br />.... 
    <div style='clear:both;'></div> 
    <button onclick="ShowCustomInfoMessageBox('Try to move the dialog','test title');" style="margin-top: 700px; clear: both">Button at the bottom of the page</button> 
</div> 

<div id="dvDialog"></div> 

CSS:

#test { 
    position:relative 
} 

JQ:

ShowCustomInfoMessageBox = function (msg, title) { 

      $("#dvDialog").dialog({ 
       title: title, 
       width: 400, 
       appendTo: "#test" 
      }).dialog("open").html(msg); 

     }