モーダルがtrueのときにブラウズボタンがJQueryダイアログで機能しない

MVC3アプリケーションでuploadify fileuploadコントロールを使用しています。モーダルがtrueのときにブラウズボタンがJQueryダイアログで機能しない

私はjQueryダイアログボックスにファイルアップロードブラウズボタンを配置しようとしています。

jQueryダイアログボックスを使用してfileuploadのコンテンツをレンダリングすると、Firefoxでうまくいきましたが、Chromeではうまくいきません。

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

modal:trueがダイアログボックスに設定されていると、動作していません。私がモーダルをコメントアウトするとうまくいきます。

しかし、私はthis投稿を見ることができましたが、私は私を助けませんでした。それでも同じ問題がここ

を持つことが、私のHTMLです：私は、

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

前に上記のコードを使用している場合

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

：ここ

<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のですbtnImgをクリックしたときにポップアップが表示されない

すべてのヘルプは、コメント追加

出典

2012-12-18 Karthik Chintala

ダイアログボックスを開いた状態でHTMLに追加します。これは、ダイアログボックスがドキュメントにバインドされるときには必要ありません。また、介入する必要もなく独自の可視性を設定します。 –

しかし私のdivのために私はページが読み込まれるときvisibiltyを無効にしています。あなたはhtmlを見ることができます、私はちょうど編集しました –

確かに、あなたはそれを表示するように設定する必要があります：なしまたは可視性：隠されていますが、再度見えるようにする必要はありません。ダイアログウィジェット自体が表示されます。 –

を理解することができる：

Uploadify 1のz屈折率が変化するニーズを自動的に適用しています。

は、問題を解決するために、あなたのCSSにこれを追加します。

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

オリジナルの答え：

ちょうどChromeでこれをテストし、問題が限り私のテストを行っているとして、あなたはHTML構造です」再使用します。

jQuery-UIダイアログは、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でダイアログを構築し、ダイアログを呼び出すことができます。

出典

2012-12-18 10:37:00

ブラウザで 'modal：true'を試しましたか？ –

はい、私はこれらのモーダルを常時使用しています。IE7 +、Chrome、Firefoxで動作します –

これでも問題が解決しない場合は、。 z-indexを増やしてみるか、他のすべての要素よりも上にあるモーダルを止める高いz-インデックスを持つ要素を探してください。 –

モーダルがtrueのときにブラウズボタンがJQueryダイアログで機能しない

答えて

関連する問題