search

google-code-export / jpicker

Automatically exported from code.google.com/p/jpicker
1 stars 0 forks source link

Just a Request: I would like it if the expandable box opened as a Modal box #10

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
1.  Open an expandable color picker box
2.  Click on a button or link that is on the web page but not in the box

What is the expected output? What do you see instead?
Expected: No ability for users to click on items on the web page outside of the 
box.
Actual:  Users can click buttons that close information areas before the color 
chooser is closed (severing any ties between content on the color picker)

What version of the product are you using? On what operating system?
1.1.3

Please provide any additional information below.
There probably is a jQuery "way" of performing this request.  If you point me 
in the right direction, I'll be happy.

Original issue reported on code.google.com by julingto...@gmail.com on 31 Aug 2010 at 12:06

GoogleCodeExporter commented 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