0

htmlとdojoのすべての人に質問があります。ユーザーがWebページにアクセスしたときに、無地の背景にあるdojoダイアログウィンドウに移動したいと思います。ユーザーがいくつかの情報を入力するいくつかのダイアログの後、すべてのdojoウィジェットをロードし、下のページを表示します。また、可能であればバックグラウンドでdojoをロードしてみたいと思います。私はこの記事を見つけました：http：//raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/、しかし私がウィジェットを過度にdivに置くと、ウィジェットは表示されず、テキストやリンクがある場合。同じcssルールをウィジェットに適用しようとしましたが、それをjsコードに含めましたが、それでも何もありませんでした。可能であれば、他のアプローチにも感謝します。

私がやろうとしているのは、最初は無地の背景にいくつかのダイアログを表示することです。ユーザーの準備ができたら、地図とwidgitsを使用してページを表示します。よろしくお願いします

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 タイプは単に 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 に答える