3

アイコンをクリックすると表示される小さなポップアップをjQueryで作成したいです。小さなウィンドウとボタンの間に直感的な接続ができるように、ポップアップの上隅をアイコンと重ねて表示します (画面の中央に表示される現在の動作とは対照的です)。これは、時計をクリックするとカレンダーが表示されるという wunderlist.com に似ています。カレンダー、テキスト ボックス、ボタンを備えたモーダルを作成したいと考えています。

jquery モーダルを表示することはできますが、その位置を制御することはできません。常に画面の中央に表示されます。jQuery UIでコードを使用しています

<script type="text/javascript">
    $.fx.speeds._default = 100;
    $(document).ready(function() {

        $( "#dialog" ).dialog({
            autoOpen: false,
            show: "blind",
        });

        $( ".hold_btn" ).click(function() {
            $( "#dialog" ).dialog( "open" );
            return false;
        });

    });
</script>

<button class="btn btn-primary hold_btn" type="button">Button</button>

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
4

2 に答える 2

5

メソッドpositionoption -positionを使用できます

この場合、次のコードを使用する必要があります。

$.fx.speeds._default = 100;
    $(document).ready(function() {
     $( ".hold_btn" ).click(function() {
            $( "#dialog" ).dialog(
                { 
                    position: {
                        my: "left top", 
                        at: "right top",
                        of: window } }

            ).dialog("show");
            return false;
        });

    });
于 2012-10-31T13:33:32.023 に答える
0

jQueryUIには、要素を配置する場所とを非常に細かく制御できる位置ユーティリティ関数があります。位置を指定するdialog()オプションがあります。

位置ユーティリティ自体は強力ですが、混乱する可能性があります。.position()さまざまな構成オプションを読むことをお勧めします。

$('#dialog').dialog({
    autoOpen: false,
    show: 'blind',
    position: { my: 'left top', at: 'left bottom', of: button }
});
于 2012-10-31T13:33:57.770 に答える