3

次のようなダイアログが必要です。

外に浮かぶアイテムとの対話

私はこのアプローチがうまくいくと思いましたが、私は間違っていたと思います:

JavaScript

//Creates The Dialog
$('.ImageDialogDiv').dialog({
    position: [98, 223],
    resizable: false,
    //modal: true,   /* UNCOMMENT AFTER DEBUGGING */
    closeOnEscape: false,
    class: 'OverwriteDialogOverflow',
    title: $('#hiddenDialogElements').html(),
    open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});

CSS

  /*
  * Overrides hidden overflow
  */
 .OverwriteDialogOverflow
 {
     overflow: visible;
 } 

HTML

<div id = "dialogDiv" class = "ImageDialogDiv"></div>

<div id = "hiddenDialogElements">
    <button id = "hiddencloseButton">Close</button>
    <div id = "hiddenArrowButtons">
        <button class = "ArrowButtonDialogLeft" onclick = "ShowNextImage(-1)" ></button>
        <button class = "ArrowButtonDialogRight" onclick = "ShowNextImage(1)" ></button>
    </div>
</div>

ダイアログから矢印または閉じるボタンを移動しようとすると、切断されて表示されなくなります。私はその追加がそれ.OverwriteDialogOverflowの世話をするだろうけれども。

提案?

4

3 に答える 3

1

投稿を更新する場合は、これをより詳細に編集しますが、ダイアログとボタンを相対位置のコンテナdivに配置し、絶対位置を使用してボタンを配置します。以下のようなもの...

HTML:

    <div id = "hiddenDialogElements">
        <button id = "hiddencloseButton">Close</button>
        <div id = "hiddenArrowButtons">
            <button class = "ArrowButtonDialogLeft" onclick = "ShowNextImage(-1)" ></button>
            <button class = "ArrowButtonDialogRight" onclick = "ShowNextImage(1)" ></button>
        </div>
    </div>
</div>

CSS:

.OverwriteDialogOverflow { overflow: visible; }

#dialogContainer { position: relative; }

#hiddencloseButton {
    position: absolute;
    top: -15px;
    right: -15px;
}

#hiddenArrowButtons {
    position: absolute;
    bottom: -30px;
}

.ui-dialog { overflow: visible; }

編集:コメントごとに.ui-dialogCSSを追加

于 2011-05-24T19:58:09.777 に答える
0

閉じるボタンを外側に移動するために、このコードを記述しました

                $(".ui-dialog-titlebar-close").css('background-image', 'url(../../images/closePopUpX.png)');
                $(".ui-dialog-titlebar-close").css('width','25');
                $(".ui-dialog-titlebar-close").css('height','25');
                $(".ui-dialog-titlebar-close").css('top','-7px');
                $(".ui-dialog-titlebar-close").css('right','-15px');
                $(".ui-dialog-titlebar-close").css('background-repeat','no-repeat');
                $(".ui-dialog-titlebar-close").css('background-position','center center');
                $(".ui-dialog").css('overflow','visible');
                $('.ui-icon').css('display','none');

ダイアログでセクションを作成します。

于 2013-09-28T19:59:05.450 に答える
0

open:関数呼び出しでカスタムインラインCSSとクラスを追加できます...

    $('#splash_screen_dialog').dialog({
        open: function(event, ui) {
            $(this).css({
                'max-height': 500,
                'overflow-y': 'auto'
            }).addClass('dialog-overflow');
        }
    });
于 2020-11-10T21:14:40.840 に答える