Dialog before landing on the page
Question
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>
1 answers
solution1
1 ACCPTED 2012-08-09 14:28:43
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 (ie 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.