Jquery ui 使用HTMLService时，jQuery Ui对话框不显示为模态_Jquery Ui_Google Apps Script

Jquery ui 使用HTMLService时，jQuery Ui对话框不显示为模态

jquery-ui google-apps-script

Jquery ui 使用HTMLService时，jQuery Ui对话框不显示为模态,jquery-ui,google-apps-script,Jquery Ui,Google Apps Script,将HTMLService与jQuery Ui对话框一起使用的示例代码来自该对话框不显示为模态 **为了得到预期的结果，我应该做些什么改变谢谢，福斯托包含以下代码的Google应用程序脚本： JS代码： function doGet() { return HtmlService.createTemplateFromFile('dialog-message.html').evaluate().setSandboxMode(HtmlService.SandboxMode.NATIVE); }

将HTMLService与jQuery Ui对话框一起使用的示例代码来自该对话框不显示为模态

**为了得到预期的结果，我应该做些什么改变

谢谢，福斯托

包含以下代码的Google应用程序脚本：

JS代码：

function doGet() {
  return HtmlService.createTemplateFromFile('dialog-message.html').evaluate().setSandboxMode(HtmlService.SandboxMode.NATIVE);
}

HTML代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Basic modal</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#dialog-modal" ).dialog({
      height: 140,
      modal: true
    });
  });
  </script>
</head>
<body>
<div id="dialog-modal" title="Basic modal dialog">
  <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
</body>
</html>

福斯托

把这种风格放在你的头部区域，它就会起作用。发生这种情况是因为JQuery模式使用position:fixed，这是Caja不允许的。我将位置更改为绝对，以获得相同的行为

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>jQuery UI Dialog - Basic modal</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css" />

               <style>
                .ui-widget-overlay {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                }
                </style>
      <script>


      $(function() {
        $( "#dialog-modal" ).dialog({
          height: 140,
          modal: true
        });
      });
      </script>
    </head>
    <body>
    <div id="dialog-modal" title="Basic modal dialog">
      <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
    </div>
    <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
    </body>
    </html>

这很奇怪，我只是在不同的浏览器中再次尝试：Chrome/Linux、Chrome/Windows、Firefox/Linux，结果相同，没有模式我可以点击并选择对话框后面的文本，不是吗您可以共享/exec链接而不是/dev来尝试吗here@FaustoR. 在我的示例中，我也可以选择文本。但我看到了发生的一切。Caja清理从jQuery模式CSS中删除了position:fixed。您需要做的是添加样式并从固定更改为绝对，您将获得相同的行为。我编辑了解决方案。我在上尝试了JQuery UI位置示例，应该跟随鼠标的绿色框被粘在屏幕的上边缘。我想这也是Caja不允许的？！