Closed GoogleCodeExporter closed 9 years ago
We have decided to implement the picker as a window instead of a modal box
including being able to focus a different window on top of another. However,
integrating the picker in a modal box is still very possible using the inline
picker code and some custom code on your end.
My recommendation is as follows:
<html>
<head/>
<body>
<div id="PickerContainer" style="display:none;">
<div class="Shadow" style="opacity:0.6; position:absolute; height:100%; left:0; top:0; width: 100%"><iframe style="opacity:0; height:100%; width:100%"/></div>
<div id="PickerInstance" style="position:fixed; _position:absolute; width:545px"></div>
</div>
...other html
</body>
</html>
Using CSS, you can hide the parent div on page initialization, and then show it
using jQuery when your user clicks on a link. The first embedded <div> can have
a black background and assign opacity to it using jQuery, as it will use the
correct tags or filters depending on the browser you use.
Inside that first <div> you see an iframe. Its height and width need to be 100%
also. This is only necessary with IE6 or IE7 Quirks Mode, otherwise any select
boxes underneath the shadow will show through. You can make this conditional in
jQuery by checking for "boxModel" support.
The next <div> is where you would attach the instance. Just register on the
cancelCallback and commitCallback events to close your popup window. You may
also use jQuery to get the modal box centered on the screen. Register on
liveCallback for live updates.
I may be able to provide a source example in the future if it would help.
Original comment by christop...@gmail.com
on 1 Sep 2010 at 11:50
Original issue reported on code.google.com by
julingto...@gmail.com
on 31 Aug 2010 at 12:06