Question

我对所有html和dojo人都有疑问。我希望当用户点击网页时，在一些固体背景上登陆dojo对话框窗口。在几个用户填充某些信息的对话框之后，我将加载所有dojo小部件并显示底层页面。如果可能的话，我也想尝试在后台加载dojo。我发现这篇文章：http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/，但如果我将小部件放在overly div中，它就不显示小部件，只有我有一些文本或链接。我尝试在我的小部件上应用相同的css规则，并将其包含在js代码中但仍然没有。如果可能的话，我会感谢其他方法。

我想要做的就是在开始时在普通背景上有一些对话框，在用户准备好之后我将显示带有地图和widgits的页面。非常感谢提前

div中的dojo：

dojo.require("dijit.Dialog");

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js.uncompressed.js" djConfig="parseOnLoad:true"></script>
<div id="overlay">
  <div>
    <div data-dojo-type="dijit.Dialog" style="width:100px; height:100px; background-color:#000077;" id="first">

      <button onclick="hideDialog();">
        Delete
      </button>
      <button onclick="cancel();">
        Cancel
      </button>
    </div>

    <a href='#' onclick='overlay()'>close</a>
  </div>
</div>

Answer 1

有一种简单的方法，只需将“真实”页面“包裹”在隐藏元素中即可。由于您使用声明性标记 - 您需要完成domReady事件（即一般的body.onload）才能显示对话框。事先，dojo.parser没有运行，dojo类型只是dom节点。

所以，尝试设置：

dojo.require("dijit.Dialog");

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js.uncompressed.js" djConfig="parseOnLoad:true"></script>

<body class="dijitThemeHere" style="display:none">
  <div id="wrapper" class="fakeBodyWrapper">
    Here is my homepage It has a blah blah blah - select you options on how page should render in dialog (this will never be visible to user)
  </div>
  <div data-dojo-type="dijit.Dialog" style="width:100px; height:100px; background-color:#000077;" id="first">
    This is my initial dialog contents
  </div>
  <script type="text/javascript">
    // dojo.js needs to be loaded here ofc
     // will use opacity - via dojo/dom-style to avoid having css hacks
     // doing so, will render the box model and calculate 
     // a width/height/position as opposed to setting display:none
     //
     // you should realize that any <script> tags above this
     // will delay hiding wrapper - so note that body has display none until now
    dojo.style(dojo.body(), "display", "");
    dojo.style(dojo.byId('wrapper'), "opacity", "0");
    dojo.addOnLoad(function() {
      dijit.byId('first').show();
      dijit.byId('first').onHide = function() {
        dojo.style(dojo.byId('wrapper'), "opacity", 1);
      };
    })
  </script>
</body>

登陆页面前的对话框

1 个答案: