0

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

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

div里面的道场：

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>

4

1 回答 1

1

有一个简单的方法，只需将您的“真实”页面“包装”在隐藏元素中。由于您使用的是声明性标记 - 您需要完成 domReady 事件（即通常的 body.onload）才能显示对话框。事先，dojo.parser 没有运行，dojo-types 将只是 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>

于 2012-08-09T14:28:43.737 回答