5

MVC3 アプリケーションで uploadify fileupload コントロールを使用しています。

ファイルアップロードの参照ボタンをjQueryダイアログボックスに配置しようとしています。

jQueryダイアログボックスを使用してファイルアップロードのコンテンツをレンダリングすると、Firefoxでは正常に機能しましたが、Chromeでは機能しません。

BrowsejQueryダイアログボックスにボタンが表示されましたが、クリックできませんでした。

modal:trueダイアログボックスに設定されている場合、機能していないことに気付きました。モーダルをコメントアウトすると、正常に動作します。

しかし、私はこの投稿を見ることができましたが、私は私を助けることができませんでした. まだ同じ問題があります

ここに私のHTMLがあります:

<body>
    <div id="fileupload" style="display:none">
        <div style="clear: none;">
            File to Upload:
            <input type="file" name="file_upload" id="file_upload" style="padding-left: 50px;"/><hr />
        </div>
        <p style="text-align: right;">
            <input type="submit" id="selectimage" value="Ok" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>
            <input type="submit" id="cancelimage" value="Cancel" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="cancelupload();" />
        </p>
    </div>
    <input type="button" id="btnImg" />
</body>

これが私のJavaScriptです：

$(function(){
    $("#btnImg").click(function () {
        $("#fileupload").dialog({
            width: '511',
            height: '200',
            modal:true,
            //show: "blind",
            position: [300, 500]
        });
    });
});

私が使用する場合

$('#fileupload').dialog({ modal: true, autoOpen: false });

上記のコードの前に、btnImg がクリックされたときにポップアップを取得できません

任意の助けをいただければ幸いです

4

1 に答える 1

1

コメントからの追加:

Uploadify には、変更が必要な 1 の z-index が自動的に適用されます。

これを CSS に追加して、問題を解決します。

.swfupload { z-index: 100000 !important; }

元の答え:

これを Chrome でテストしたところ、私のテストで問題になったのは、使用している HTML 構造です。

jQuery-UI Dialog は、DOM の任意の場所から要素を取得し、それをダイアログとして表示します。入力要素ボタン内にネストする必要はありません。

<body>

    <div id="container">

        <input type="button" name="dialogOpen" value="open dialog!" />

    </div>

    <!-- using jquery uis helper classes to hide content is a better way than
         declaring inline styles -->

    <div id="modalWindow" class="ui-helper-hidden" title="Modal window">

        <h1>Example Modal Window</h1>
        <p>...</p>

    </div>

</body>

モーダル ウィンドウの html がコンテナーの外側にあり、非表示になっていることに注意してください。これにより、親要素のスタック順序がダイアログ html に影響を与えないことが保証されます。

$('#container').on('click', 'input[name="dialogOpen"]', function(event) {

    // Using form buttons in some browsers will trigger a form submit
    event.preventDefault();

    $('#modalWindow').dialog({
        width : 500,
        height : 200,
        ...
    });

});

さらに、ダイアログを作成するために DOM 要素さえ必要ありません。jQuery または JavaScript でダイアログを作成し、それに対してダイアログを呼び出すことができます。

// Create the new element, populate with HTML and create dialog
$('<div />', {
    'id' : 'modalWindow',
    'title' : 'New modal window'
})
.html('<h1>New modal</h1><p>Modal text</p>')
.dialog();
于 2012-12-18T10:37:00.073 に答える