CODEWITHSUNDEEP
javascripthtmldojo
setlio
setlio

Reputation: 726

Dialog before landing on the page

I have a question for all the html and dojo people. I want when user hits the webpage, to land on dojo dialog window on some solid background. After couple of dialogs where the users fills some information I will load all dojo widgets and display the underling page. I also want to try to load dojo in the background if possible. I found this article: http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/, but if I place the widget in the overly div it does not show the widget, only if I have some text or links. I tried to apply the same css rules on my widget and also included it in the js code but still nothing. I will be thankful for some other approach if possible too.

All I am trying to do is have some dialogs on plain background in the beginning, after the user is ready I will show the page with map and widgits. Thanks a lot in advance

The dojo inside the 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>

Upvotes: 0

Views: 495

Answers (1)

mschr
mschr

Reputation: 8641

There's an easy method for this which simply involves 'wrapping' you 'real' page within a hidden element. Since youre using declarative markup - you will need the domReady event (i.e. body.onload in general) to finish in order for a dialog to be presented. Beforehand, the dojo.parser is not run and the dojo-types will simply be dom nodes.

So, try setting up as such:

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>

Upvotes: 1

Related Questions