Скрипт переводчика веб-сайта Google мешает левому значению диалогового окна jquery

Скрипт переводчика веб-сайта Google мешает левому значению диалогового окна jquery.

Когда экран загружен, диалоговое окно сначала центрируется, а затем сдвигается вправо. Я не знаю, почему это происходит. Могу ли я запустить диалог, где я хочу?

Это пример кода.

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 <script type="text/javascript">
  function googleTranslateElementInit() {
   new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
  }
 </script>
 <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>

<body style="width:500px;margin:auto;">
<p>body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ </p>

<div class="popup0_dialog" title="NOTICE">
 <p>This dialog box will be pushed right.</p>
</div>

<script type="text/javascript">
 $(document).ready(function () {
  // catation dialog 옵션
  $(".popup0_dialog").dialog({
   dialogClass: "popup0_dialog_class",
   position: {my: "center top ", at: "center top+100", of: "body"},
  });
 });

</script>

</div>
</body>
</html>

Источник

1 ответ

Кто-то из другого сообщества сказал мне ответ. Переводчик сайта Google сделал тело, чтобы иметь положение: относительное. Создав новый div, который имеет значение width вместо элемента body, я могу решить эту проблему.

Если у вас есть другие хорошие решения, пожалуйста, дайте мне знать.

<body>
    <div style="width:500px;margin:auto;">
        <p>body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ </p>

        <div class="popup0_dialog" title="NOTICE">
            <p>This dialog box will be pushed right.</p>
        </div>
    </div>
</body>
Источник
Другие вопросы по тегам