Question

将HTMLService与来自http://jqueryui.com/dialog/#modal的jQuery-Ui对话框示例代码一起使用对话框不显示为模态

**我应该改变什么来获得预期的结果？

谢谢，Fausto

Google Apps脚本，包含以下代码：

JS代码：

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

HTML code：

<!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>

Answer 1

福斯托，

将这种风格放在你的头部，它会起作用。之所以发生这种情况，是因为JQuery Modal使用的是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>

jQuery-Ui对话框没有使用HTMLService显示为模态

1 个答案: