views:

658

answers:

1

I'm trying to enable the overlay to be modal. It works perfectly fine in FireFox, but the window object is behind the mask when it becomes modal. This prevents any interaction with it and the page is actually useless. I've tried debugging this for a while and can't figure it out.

Here is a link to the example on their site: http://flowplayer.org/tools/demos/overlay/modal-dialog.html

$.fn.cfwindow = function(btnEvent,modal,draggable){
    //error checking
    if(btnEvent == ""){
        alert('Error in window :\n Please provide an id that instantiates the window. ');
    }   

    if(!modal && !draggable){
        $('#'+btnEvent+'[rel]').overlay();
        $('#content_overlay').css('cursor','default');
    }

    if(!modal && draggable){
        $('#'+btnEvent+'[rel]').overlay();
        $('#content_overlay').css('cursor','move');
        $('#custom').draggable();
    }

    if(modal){
        $('#'+btnEvent+'[rel]').overlay({
            // some mask tweaks suitable for modal dialogs
            mask: {
                color: '#646464',
                loadSpeed: 200,
                opacity: 0.6
            },
            closeOnClick: false
        }); 
        $('#content_overlay').css('cursor','default');
        $('#custom').addClass('modal');
    }

};

That's what I'm referencing when I call through:

<script type="text/javascript">         
    $(document).ready(function(){
        $(document).pngFix();
        var modal = <cfoutput>#attributes.modal#;
        var drag = #attributes.draggable#;
        var btn = '#attributes.selector#';
        var src = '#attributes.source#';

        var wid = '#attributes.width#';

        $('##custom').width(parseInt(wid));

        $('div##load_content').load(src);
        $('##custom').cfwindow(btn,modal,drag,wid);
    });
</script>

CSS for the modal:

<style type="text/css">
    .modal {
        display:none;
        text-align:left;                
        background-color:#FFFFFF;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;

    }
</style>

Exclude the and the additional pound signs, IE. "##".

Screen shot of the problem: http://twitpic.com/1tak06

Note: IE6 and IE8 have the same problem.

Any help would be appreciated.

Update: HTML of the overlay/modal window:

            <div class="simple_overlay" id="custom">
                <div id="content_overlay">
                   <div id="handler">
                        <div id="headerss">
                            <h5 class="titless"><span style="color:##000000;">#attributes.title#</span></h5>
                            <div class="yellowRule"></div>
                        </div>
                        <div id="load_content">    

                        </div>              
                    </div>
                </div>
            </div>

Updated: Add front end

    <!-- overlay triggers. overlay is referenced in the 'rel' attribute -->
    <p>

        <button rel="#custom" type="button" id="openWindow">Email</button>
    </p>

    <cf_eo_window2 
        title="This modal isn't working in IE!"
        selector="openWindow"
        draggable="false"
        width="350"
        modal="true"
        source="import-test.cfm" 
        />
+1  A: 

Have you tried adding a z-index:999; to your .modal? I assume your div has a class name of modal? Can I see how you have your html set up?

edl
Yeah. I tried adding the z-index already. I'll add the HTML right now.
Michael Stone
Wow, that's a lot of divs. Your problem may be in that you have nested your modal div within your overlay div. The beauty of modal scripts is that it generally ignores structure, as long as it knows where to get the contents, IE the form and the overlay. Try pulling out the portion that is your modal and see if you get better results.
edl
Thanks for the input. I tried that and it makes no impact. Also, each set of divs plays a specific role in the custom design of the window. I've tried stripping it down to the basics and yet, still nothing.
Michael Stone
Then you've got me stumped. What has me particularly confused is that the only place I've see you call `overlay()` is on `$('#'+btnEvent+'[rel]')` and I don't see anything with a rel attribute unless i've overlooked it. Sorry I can't be of more help.
edl
Sorry about that. That was the back end of what was going on. It's not much, but I'll add the rest. The front end deals with a button and the implementation of a ColdFusion custom tag I developed which makes implementing this window easier. I'll post that above.
Michael Stone
Ahh. In that case, shouldn't it be something like `$('#openWindow').overlay()`?
edl
That's what it is, but using the variable allows it to be more generic and reusable across our large site. The variable being passed in is an attribute we define when we instantiate the window/overlay. See the updated front end portion. You'll see where I'm passing in openWindow into the "selector" attribute.
Michael Stone
Ahh. I see. Sorry, not familiar with CF. I guess the #attributes.variable# gets replaced by the CF? I'm out of ideas so far. Let me know if you ever resolve this. On another note, have you considered just using a plain JQuery UI dialog or is there a reason you want to stick with the flowplayer variety?
edl
jQuery tools overlay is a bit smaller than jQuery UI. We're really looking for performance, but if it comes down to quality, then we might require to go with the jQuery UI dialog. The UI is a very large file, but it's also very powerful and works very well. I'm hoping to find something that works minimally just as well.
Michael Stone