0

ユーザーがアンカーリンクをクリックした後、JqueryUIダイアログボックスを開こうとしています。

Jquery1.5.2とUI1.8.11を使用していますが、エラーメッセージは表示されません。このページの例に従っています：jqueryuiダイアログのドキュメント

私のJS：

$(document).ready(function() {
  $('#payTypeOptions').dialog({
    autoOpen: false,
    height:600,
    width: 600,
    modal: true
});

  $('#showPayTypeOptions').click(function(){
    $('#payTypeOptions').dialog('open');
    //If I put an alert() here, the alert shows
  });

});

HTML：

<a id="showPayTypeOptions">Do something</a>

<div id="payTypeOptions">
 <p>Content</p>
</div>

ありがとう。

編集：コードに問題はありませんでした。インポートプロセスでのユーザーエラーでした-doh！

4

7 に答える 7

4

私も以前にこれが起こったことがあり、それは輸入品と関係がありました。それが当てはまるかどうかを確認するには、次のスクリプトとスタイルを試してください。試す：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
于 2011-04-19T19:09:20.540 に答える
1 
$(document).ready(function() {
    $('#payTypeOptions').dialog({
        autoOpen: false,
        height:600,
        width: 600,
        modal: true
    });

    $('#showPayTypeOptions').click(function(){
        $('#payTypeOptions').dialog('open');
        //If I put an alert() here, the alert shows
    });
});

最初にダイアログボックスを作成してから呼び出す場所で、それらを入れ替える必要があると思います。

于 2011-04-19T19:09:02.630 に答える
1

これを試して：

$(document).ready(function() {
    $('#showPayTypeOptions').click(function(){

        $('#payTypeOptions').dialog({
            autoOpen: false,
            height:600,
            width: 600,
            modal: true
        });
    });
});

それがモーダルを開くかどうかを確認してください。その場合は、モーダルピースを開こうとする前に、最初にモーダルピースを宣言する必要があります。

于 2011-04-19T19:10:55.310 に答える
1

ここhttp://pluksza.blogspot.com/2011/06/jquery-ui-dialog-open-good-practise.htmlのような関数を作成 し、イベントをボタンにバインドします

于 2011-06-23T09:58:25.930 に答える
1

非常によく似た問題がありましたが、モーダルが一瞬開いてから消えました。[ダイアログを開く]ボタンをクリックしたときに、Chrome開発ツールの[要素]タブでHTMLの変更を確認して、解決策を見つけました。ボタンまたはリンクの場合は、クリックした要素からfalseを返すことを忘れないでください。そうしないと、ページが投稿または再度取得され、ダイアログが失われます。したがって、私のコードは次のようになります。

$(document).ready(function() {

  $('#payTypeOptions').dialog({
    autoOpen: false,
    height: 600,
    width: 600,
    modal: true
  });

  $('#showPayTypeOptions').click(function() {
    $('#payTypeOptions').dialog('open');
    return false; // This makes all the difference in my case
  });

});

これが誰かに役立つことを願っています

于 2012-09-07T13:54:15.560 に答える
0

ダイアログを変数に保存し、それを参照してみてください。私はこの方法でそれを行うことに成功しました：

$(document).ready(function() {
  var mydialog = $('#payTypeOptions').dialog({
    autoOpen: false,
    height:600,
    width: 600,
    modal: true
  });

  $('#showPayTypeOptions').click(function(){
    mydialog.dialog('open'); //Changed here
    //If I put an alert() here, the alert shows
    //Also, you should probably return false here to prevent the browser
    // from following the link (or doing something weird since you don't have
    // an href).
    return false;
  });

});
于 2011-04-19T19:18:29.040 に答える
0

ダイアログを宣言したら（「開く」前に）、DOMインスペクター（firebug）を使用してdivを確認できますか？ダイアログが宣言されると、jQueryによって作成された多くの追加のマークアップが表示されます。ui-widget、ui-dialogなど..

于 2011-04-19T19:19:50.343 に答える