Question

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

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

问题1：关闭后它将无法再次打开。灰色叠加层出现但模态不会打开。

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

注意事项。

我在功能上相信它是开放的。它不会将对话框的CSS样式从none更改为显示所需的样式。

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

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

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

这是代码

inline css in head（我将对话框正常工作后将其移动到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>

Answer 1

最终是因为在页面上加载了所有内容后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;}

在页面加载后，jquery ui对话框模态不会打开

1 个答案: