0

我在 ie 中遇到了 jquery ui 对话框模式的问题。

如果我在页面完全加载之前单击以打开 jquery ui 对话框模式，它将正确打开。

问题1：关闭后不会再打开。灰色叠加层出现，但模式未打开。

问题 2：如果我等到页面完全加载，那么我会得到相同的效果。

注意事项。

我相信它在功能上是开放的。它只是没有将对话框的 CSS 样式从无更改为需要显示的样式。

页面中有两个版本的 jQuery。我正在使用 noConflict 选项来处理这个问题。旧版本是 1.6.2，另一个是最新版本 1.8.3

如果我进入控制台窗口并使用 1.6.2 版本，我可以打开它，但 css 仍然有点麻烦。它只显示 1/2 的窗口。

我想知道页面上有两个版本的jQuery是否有问题。

这是代码

头中的内联css（在我让对话框正常工作后，我将它移动到一个css文件中）

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

旧版本的 jQuery (1.6.3)

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

新版本的 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>

正文中的对话框模式

<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>
4

1 回答 1

0

它最终是在页面上加载所有内容后css被覆盖。

我最终将以下内容添加到我的 css 文件中

        .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;}
于 2012-12-19T15:42:51.693 回答