Question

I’m having a problem with the jquery ui dialog modal in ie.

If I click to open the jquery ui dialog modal before the page fully loads it opens correctly.

Problem 1:
After closing it will not open again. The gray overlay comes up but the modal does not open.

Problem 2:
If I wait till the page fully loads then I get the same effect.

Things to note.

I believe functionally that it is opening. It is just not changing the CSS style for the dialog from none to the style needed to display.

There are two version of jQuery in the page. I”m using the noConflict option to handle this. The old one is 1.6.2 and the other is the latest version 1.8.3

If I go into the console window and use the 1.6.2 version I can open it up but the css is still a little screwie. It only displays 1/2 the window.

I’m wondering if its a problem with having two version of jQuery on the page.

Here is the code

inline css in head ( I am moving this into a css file after i get the dialog working correctly)

<style type="text/css">
        .ui-icon-custom{ 
        background-image: url(/webapp/wcs/stores/B2BDirectStorefrontAssetStore/images/pastpurchases/buttons/btnClose.png) !important;
        width: 35px !important; 
        height: 35px !important; 
        margin-left: -9px !important; 
        margin-top: -9px !important
    }
    #dialog-modal{
        display: none;
    }
</style>

old version of jQuery (1.6.3)

  <script type="text/javascript">
    var jQuery = $.noConflict(true);
</script>

new version of jQuery

    <script type="text/javascript" src="/webapp/wcs/stores/B2BDirectStorefrontAssetStore//javascript/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/webapp/wcs/stores/B2BDirectStorefrontAssetStore//javascript/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" >
    var jQuery_1_8_3 = $.noConflict(true);
             jQuery_1_8_3(function() {
                    jQuery_1_8_3("#dialog-modal").dialog({
                            height: 600,
            width: 650,
                            autoOpen: false,
                            modal: true,
            position:{
                my: 'center',
                at: 'center',
                of: window},
            resizable: false,
            draggable: false /*,
            create: function(event, ui) {
                var widget = jQuery_1_8_3(this).dialog("widget");
                jQuery_1_8_3(".ui-dialog-titlebar-close span", widget).removeClass("ui-icon-closethick").addClass("ui-icon-custom");
                }
                */  

                    });
            });
          jQuery_1_8_3(document).ready(function() {
            jQuery_1_8_3("#prodEnlarge").click(function() {
                    jQuery_1_8_3("#dialog-modal").dialog('open');
                    return false;
            });

            });     

</script>

Dialog modal in body

<div id="prodEnlarge" onclick="sendOmnitureViewLargerClick('event18','Products;359960', isCLP);" style="cursor: pointer;"><img src="/webapp/wcs/stores/B2BDirectStorefrontAssetStore/images/ico_enlarge.png" alt="enlarge" align="left"/><span>click to view larger</span></div>
        <div id="dialog-modal" style="position:relative" >
                <img src="/prodimg/003/500/204078000003.jpg"/>
            </div>

Answer 1

It ending up being that the css was getting overwritten after everything loaded on the page.

I ended up adding the following to my css file

        .ui-dialog-titlebar {
        border: none !important; 
        background: none !important;  
    }
    .ui-icon-custom{ 
        background-image: url(/webapp/wcs/stores/B2BDirectStorefrontAssetStore/images/ui-buttons.png) !important;
        background-position: -608px 0;
        position: absolute;
        width: 32px !important; 
        height: 30px !important; 
        margin-left: 7px !important; 
        margin-top: -20px !important;
        cursor: pointer;
        z-index: 3200;
    }
    .ui-icon-custom:hover{
        background-position:-608px -30px;
    }
    #dialog-modal{
        display: none;
    }
    .ui-dialog{
        overflow: visible;
        width: 650px;
        height: 600px;
        z-index: 9999;
    }
    .ui-state-hover{
        border: none !important;
        background: none !important;
    }
    input.ui-button { padding-bottom: 0 !important;}