0

ie の jquery ui ダイアログ モーダルに問題があります。

ページが完全に読み込まれる前にjquery uiダイアログモーダルをクリックして開くと、正しく開きます。

問題 1: 閉じた後、再び開かない。灰色のオーバーレイが表示されますが、モーダルは開きません。

問題 2: ページが完全に読み込まれるまで待つと、同じ結果が得られます。

注意事項。

機能的には開いていると思います。ダイアログの CSS スタイルを none から表示に必要なスタイルに変更していないだけです。

このページには 2 つのバージョンの jQuery があります。これを処理するために noConflict オプションを使用しています。古いバージョンは 1.6.2 で、もう 1 つは最新バージョンの 1.8.3 です。

コンソール ウィンドウに移動して 1.6.2 バージョンを使用すると、それを開くことができますが、CSS はまだ少し厄介です。ウィンドウの半分しか表示されません。

ページに 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 に答える