Question

我希望有一个看起来像这样的对话框：

Dialog with items floating outside

我认为这种方法可行，但我想我错了：

的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会照顾到这一点。

建议？

Answer 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-dialog CSS

Answer 2

关于向外移动的关闭按钮我写了这段代码

                $(".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');

在对话框创建部分中

。

Answer 3

您可以在 open：函数调用上添加自定义内联CSS和类...

Enumeration

如何使项目浮动在Jquery对话框之外

3 个答案: